<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

浏览器兼容性

BCD tables only load in the browser

参见