<marker>
<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>
<!-- A marker to be used as an arrowhead -->
<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>
<!-- A line with a marker -->
<line
x1="10"
y1="10"
x2="90"
y2="90"
stroke="black"
marker-end="url(#arrow)" />
<!-- A curved path with markers -->
<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>
<!-- Arrowhead marker definition -->
<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>
<!-- Dot marker definition -->
<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>
<!-- Coordinate axes with an arrowhead in both directions -->
<polyline
points="10,10 10,90 90,90"
fill="none"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<!-- Data line with polymarkers -->
<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
和 context-stroke
值使标记使用与其附加的形状相同的填充和描边。
<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
-
此属性定义标记视口的高度。值类型:<length>;默认值:
3
;可动画:是 markerUnits
-
此属性定义属性
markerWidth
、markerHeight
和<marker>
内容的坐标系。值类型:userSpaceOnUse
|strokeWidth
;默认值:strokeWidth
;可动画:是 markerWidth
-
此属性定义标记视口的宽度。值类型:<length>;默认值:
3
;可动画:是 orient
-
此属性定义标记相对于其附加的形状的方向。值类型:
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>;默认值:无;可动画:是
使用上下文
规范
规范 |
---|
可缩放矢量图形 (SVG) 2 # MarkerElement |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
- 相关标记属性:
marker-start
、marker-mid
和marker-end