标记(marker)

前端教程SVG

SVG 引入了 <marker> 元素使得绘制标记（如箭头）变得更加容易。

<marker> 和 <symbol> 有一些类似性质：

• 定义了可以被重复使用的小图标、小图形
• 不会直接被 SVG 绘制，需要被其他元素引用才行

不同之处在于：

• <symbol> 是被 <use> 元素引用的，一个 <use> 引用一个 <symbol>；
• 然而 <marker> 是被 <line> <polygon> <path> 等引用的，并且引用一次就可以绘制多个 marker（例如在路径的起始2个位置，或者两条线的交接处等）

基本语法

定义 <marker>：

<svg>
    <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse" markerUnits="strokeWidth">
            <path d="M 0 0 L 10 5 L 0 10 z" />
        </marker>
        <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" preserveAspectRatio="xMidYMid meet">
            <circle cx="5" cy="5" r="5" fill="red" />
        </marker>
    </defs>
</svg>

• markerUnits="userSpaceOnUse|strokeWidth"：定义了 markerWidth markerHeight 和 <marker> 里的图形使用何种坐标系统，默认 strokeWidth
  • userSpaceOnUse：相对整个 SVG 的用户空间
  • strokeWidth：相对引用此 <marker> 的元素的 stroke-width
• markerWidth markerHeight：定义了 <marker> 的视口宽高，类似 <svg> 的 width height 属性。默认 3，也就是说 <marker> 默认为 3×3 的正方形。
• viewBox 类似于 <svg> 的 viewBox
• preserveAspectRatio：类似于 <svg> 的 preserveAspectRatio
• refX="left|center|right|{number}" refY="top|center|bottom|{number}"：引用此 <marker> 时，把 <marker> 的坐标 (refX, refY) 作为参考引用点
  • refX refY 默认值为 0
• orient="auto|auto-start-reverse|{angle}"：定义了此 <marker> 的方向，默认 0
  • auto：跟随引用元素的路径方向
  • auto-start-reverse：当 marker-start="url(#markerId)" 时，反转 180°，此外与 auto 都一样
  • {angle}：角度，例如 45 45deg

引用 <marker>：

<svg>
    <defs>
        <marker id="arrow" ...> ... </marker>
        <marker id="dot" ...> ... </marker>
    </defs>
    <polyline points="20,50 40,40 80,50" marker-start="url(#arrow)" marker-mid="url(#dot)" marker-end="url(#arrow)" stroke="black" fill="none" />
</svg>

• marker-start="url(#markerId)"：定义路径起点所引用的标记
• marker-mid="url(#markerId)"：定义路径起始点之外的其他两线交叉处所引用的标记
• marker-end="url(#markerId)"：定义路径终点所引用的标记
• style="marker(#markerId)"：当 marker-start marker-mid marker-end 相同时，可以用这种方式简写
  • 注意：没有单独的 marker attribute，得使用 CSS 的 marker property

示例1

示例2(图表)

小结

本节介绍了 <marker> 的用法，下一节我们介绍 clipping(裁剪) 和 masking(遮罩)。