<marker>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
<marker>
元素定义了在给定 <path>
、<line>
、<polyline>
或 <polygon>
元素上绘制箭头或者多边标记所使用的图形。
可以使用 marker-start
、marker-mid
和 marker-end
属性将标记附着到形状上。
示例
绘制箭头
以下示例展示如何在直线或者曲线路径上绘制箭头。对于曲线路径,每个点都用 marker-mid
标记绘制一个箭头。
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 用作箭头的 marker -->
<marker
id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<!-- 带标记的线 -->
<line
x1="10"
y1="10"
x2="90"
y2="90"
stroke="black"
marker-end="url(#arrow)" />
<!-- 带标记的曲线-->
<path
d="M 110 10
C 120 20, 130 20, 140 10
C 150 0, 160 0, 170 10
C 180 20, 190 20, 200 10"
stroke="black"
fill="none"
marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
</svg>
绘制多边标记
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 箭头 marker 定义 -->
<marker
id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<!-- 点 marker 定义 -->
<marker
id="dot"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="5"
markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- 在两个方向上都带有箭头的坐标轴 -->
<polyline
points="10,10 10,90 90,90"
fill="none"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<!-- 多边标记数据线 -->
<polyline
points="15,80 29,50 43,60 57,30 71,40 85,15"
fill="none"
stroke="grey"
marker-start="url(#dot)"
marker-mid="url(#dot)"
marker-end="url(#dot)" />
</svg>
使用 context fill 和 stroke
以下示例展示了如何使用 context-fill
和 context-stroke
值可以让一个 marker 使用与其附加到的形状相同的填充和描边。
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<marker
id="circle"
markerWidth="6"
markerHeight="6"
refX="3"
refY="3"
markerUnits="strokeWidth">
<circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" />
</marker>
<style>
path {
marker: url(#circle);
}
</style>
<path d="M 10,10 30,10 h 10" stroke="black" />
<path d="M 10,20 30,20 h 10" stroke="blue" fill="red" />
<path d="M 10,30 30,30 h 10" stroke="red" fill="none" />
<path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" />
</svg>
属性
markerHeight
-
该属性定义了 marker 视口的高度。值的类型:<length>;默认值:
3
;动画性:有 markerUnits
-
该属性为
markerWidth
、markerHeight
和<marker>
的内容定义了坐标系。值的类型:userSpaceOnUse
|strokeWidth
;默认值:strokeWidth
;动画性:有 markerWidth
-
该属性定义了 marker 视图的宽度。值的类型:<length> ;默认值:
3
;动画性:有 orient
-
该属性定义了 marker 相对于它所附着到形状的方向。值的类型:
auto
|auto-start-reverse
|<angle> ;默认值:0
;动画性:有 preserveAspectRatio
-
该属性定义了 svg 片段在嵌入具有不同宽高比例的容器中应该如何变形。值的类型:(
none
|xMinYMin
|xMidYMin
|xMaxYMin
|xMinYMid
|xMidYMid
|xMaxYMid
|xMinYMax
|xMidYMax
|xMaxYMax
) (meet
|slice
)? ;默认值:xMidYMid meet
;动画性:有 refX
-
该属性定义了标记参考点的 x 的坐标。 值的类型:
left
|center
|right
|<coordinate> ;默认值:0
;动画性:有 refY
-
该属性定义了标记参考点的 y 的坐标。 值的类型:
top
|center
|bottom
|<coordinate> ;默认值:0
;动画性:有 viewBox
-
该属性定义了当前 SVG 片段的 SVG 视口边界。 值的类型:<list-of-numbers> ;默认值:none;动画性:有
使用上下文
规范
Specification |
---|
Scalable Vector Graphics (SVG) 2 # MarkerElement |
浏览器兼容性
BCD tables only load in the browser
参见
- 与 marker 相关的属性:
marker-start
、marker-mid
和marker-end