<marker>
<marker>
元素定义了在给定 <path>
、<line>
、<polyline>
或 <polygon>
元素上绘制箭头或者多边标记所使用的图形。
可以使用 marker-start
、marker-mid (en-US)
和 marker-end
属性将标记附着到形状上。
示例
绘制箭头
以下示例展示如何在直线或者曲线路径上绘制箭头。对于曲线路径,每个点都用 marker-mid (en-US)
标记绘制一个箭头。
html
<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>
绘制多边标记
html
<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 使用与其附加到的形状相同的填充和描边。
html
<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 (en-US)
-
该属性定义了 marker 视口的高度。值的类型:<length>;默认值:
3
;动画性:有 markerUnits (en-US)
-
该属性为
markerWidth
、markerHeight
和<marker>
的内容定义了坐标系。值的类型:userSpaceOnUse
|strokeWidth
;默认值:strokeWidth
;动画性:有 markerWidth (en-US)
-
该属性定义了 marker 视图的宽度。值的类型:<length> ;默认值:
3
;动画性:有 orient (en-US)
-
该属性定义了 marker 相对于它所附着到形状的方向。值的类型:
auto
|auto-start-reverse
|<angle> ;默认值:0
;动画性:有 preserveAspectRatio
-
该属性定义了 svg 片段在嵌入具有不同宽高比例的容器中应该如何变形。值的类型:(
none
|xMinYMin
|xMidYMin
|xMaxYMin
|xMinYMid
|xMidYMid
|xMaxYMid
|xMinYMax
|xMidYMax
|xMaxYMax
) (meet
|slice
)? ;默认值:xMidYMid meet
;动画性:有 refX (en-US)
-
该属性定义了标记参考点的 x 的坐标。 值的类型:
left
|center
|right
|<coordinate> ;默认值:0
;动画性:有 refY (en-US)
-
该属性定义了标记参考点的 y 的坐标。 值的类型:
top
|center
|bottom
|<coordinate> ;默认值:0
;动画性:有 viewBox
-
该属性定义了当前 SVG 片段的 SVG 视口边界。 值的类型:<list-of-numbers> ;默认值:none;动画性:有
全局属性
- 核心属性 (en-US)
-
最重要的:
id
、tabindex (en-US)
- 样式属性
class (en-US)
、style
- 条件处理属性 (en-US)
- 表现属性 (en-US)
-
最重要的:
clip-path
、clip-rule (en-US)
、color
、color-interpolation (en-US)
、color-rendering
、cursor (en-US)
、display
、fill
、fill-opacity
、fill-rule
、filter
、mask
、opacity
、pointer-events
、shape-rendering
、stroke
、stroke-dasharray
、stroke-dashoffset
、stroke-linecap
、stroke-linejoin
、stroke-miterlimit
、stroke-opacity
、stroke-width
、transform
、vector-effect
、visibility
- ARIA 属性
-
aria-activedescendant
、aria-atomic
、aria-autocomplete
、aria-busy
、aria-checked
、aria-colcount
、aria-colindex
、aria-colspan
、aria-controls
、aria-current
、aria-describedby
、aria-details
、aria-disabled
、aria-dropeffect
、aria-errormessage
、aria-expanded
、aria-flowto
、aria-grabbed
、aria-haspopup
、aria-hidden
、aria-invalid
、aria-keyshortcuts
、aria-label
、aria-labelledby
、aria-level
、aria-live
、aria-modal
、aria-multiline
、aria-multiselectable
、aria-orientation
、aria-owns
、aria-placeholder
、aria-posinset
、aria-pressed
、aria-readonly
、aria-relevant
、aria-required
、aria-roledescription
、aria-rowcount
、aria-rowindex
、aria-rowspan
、aria-selected
、aria-setsize
、aria-sort
、aria-valuemax
、aria-valuemin
、aria-valuenow
、aria-valuetext
、role
使用说明
规范
Specification |
---|
Scalable Vector Graphics (SVG) 2 # MarkerElement |
浏览器兼容性
BCD tables only load in the browser
参见
- 与 marker 相关的属性:
marker-start
、marker-mid (en-US)
和marker-end