SVG中的marker元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/10/SVG%E4%B8%AD%E7%9A%84marker%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

作用
attribute

正文

作用

定义标记给<path>、<line>、<polyline>、<polygon>使用

使用marker-start、marker-mid、marker-end将<marker>附在被标记图形的顶点上

marker-start表示起点
marker-end表示终点
marker-mid表示其他顶点

如果各个顶点的标记都相同，也可以使用marker将<marker>附在被标记图形的顶点上

注意：

对于<line>而言，只有起点和终点，没有其他顶点
对于<polygon>而言，起点终点重合为一个点

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <marker id="foo" markerWidth="10" markerHeight="20" refX="10" refY="10">
        <polygon points="0 0 10 10 0 20" style="fill:none;stroke:#000"/>
    </marker>
    <line x1="50" x2="250" y1="80" y2="80" style="stroke:#000;marker-start:url(#foo);marker-end:url(#foo)"/>
</svg>

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <marker id="foo" markerWidth="10" markerHeight="20" refX="10" refY="10">
        <polygon points="0 0 10 10 0 20" style="fill:none;stroke:#000"/>
    </marker>
    <line x1="50" x2="250" y1="80" y2="80" style="stroke:#000;marker:url(#foo)"/>
</svg>

attribute

markerWidth

<marker>的 viewport 的宽度

markerHeight

<marker>的 viewport 的高度

refX

参考点的 x 坐标，参考点即<marker>中和被标记图形顶点对齐的那个点

refY

参考点的 y 坐标，参考点即<marker>中和被标记图形顶点对齐的那个点

orient

绕被标记顶点的旋转角度

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <marker id="foo" markerWidth="10" markerHeight="20" refX="10" refY="10" orient="90">
        <polygon points="0 0 10 10 0 20" style="fill:none;stroke:#000"/>
    </marker>
    <line x1="50" x2="250" y1="80" y2="80" style="stroke:#000;marker-start:url(#foo);marker-end:url(#foo)"/>
</svg>

viewBox

viewBox用于重新定义<marker>的 viewport 的坐标系和单位长度

viewBox的值由 4 个数字组成：

最小的 x 坐标
最小的 y 坐标
宽度
高度

示例：

在10px * 20px的画布大小内，x 方向的最小值为0，最大值为5，y 方向的最小值为0，最大值为10
x 方向上，1 单位长度表示2px，y 方向上，1 单位长度表示2px
绘制一个底为 10 个单位长度、高为 5 个单位长度的等腰直角三角形（1/2 * 20px * 10px）
<marker>中的(5, 5)与被标记的顶点对齐

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <marker id="foo" markerWidth="10" markerHeight="20" refX="5" refY="5" viewBox="0 0 5 10">
        <polygon points="0 0 5 5 0 10" style="fill:none;stroke:#000"/>
    </marker>
    <line x1="50" x2="250" y1="80" y2="80" style="stroke:#000;marker-start:url(#foo);marker-end:url(#foo)"/>
</svg>

preserveAspectRatio

当viewBox中定义的宽高比和 viewport 的宽高比不相等时，图形如何缩放和对齐

原理同SVG中的svg元素一文，此处不再赘述

markerUnits

定义<marker>中的单位长度

strokeWidth 单位长度为被标记元素的stroke-width
userSpaceOnUse 单位长度和被标记元素所在坐标系的单位长度相同

默认值为strokeWidth

示例：<marker>的单位长度为5，相当于<marker>整体放大了5倍

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <marker id="foo" markerWidth="10" markerHeight="20" refX="10" refY="10" markerUnits="strokeWidth">
        <polygon points="0 0 10 10 0 20" style="fill:none;stroke:#000"/>
    </marker>
    <line x1="50" x2="250" y1="80" y2="80" style="stroke:#000;stroke-width:5;marker-start:url(#foo);marker-end:url(#foo)"/>
</svg>

示例：<marker>的单位长度为1

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <marker id="foo" markerWidth="10" markerHeight="20" refX="10" refY="10" markerUnits="userSpaceOnUse">
        <polygon points="0 0 10 10 0 20" style="fill:none;stroke:#000"/>
    </marker>
    <line x1="50" x2="250" y1="80" y2="80" style="stroke:#000;stroke-width:5;marker-start:url(#foo);marker-end:url(#foo)"/>
</svg>