<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-startmarker-midmarker-end 属性将标记附着到形状上。

示例

绘制箭头

以下示例展示如何在直线或者曲线路径上绘制箭头。对于曲线路径,每个点都用 marker-mid 标记绘制一个箭头。

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-fillcontext-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

该属性定义了 marker 视口的高度。值的类型<length>默认值3动画性

markerUnits

该属性为 markerWidthmarkerHeight<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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
marker
markerHeight
markerUnits
markerWidth
orient
refX
refY
viewBox

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见