<marker>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<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 |
浏览器兼容性
Loading…
参见
- 与 marker 相关的属性：
marker-start、marker-mid和marker-end