SVG <marker>
SVG Marker - <marker>
<marker> 元素用于创建 <line>、<path>、<polyline> 或 <polygon> 的起始、中间和结束标记。
所有 SVG 标记都定义在 <defs> 元素内。<defs> 元素是“definitions”的缩写，包含特殊元素的定义（例如标记）。
标记通过 marker-start、marker-mid 和 marker-end 属性附加到形状上。
<marker> 元素有六个基本属性来定位和设置标记的大小
| Attribute | 描述 |
|---|---|
| id | 标记的唯一 ID |
| markerHeight | 标记的高度。默认为 3 |
| markerWidth | 标记的宽度。默认为 3 |
| refX | 标记与顶点连接的 x 位置。默认为 0 |
| refY | 标记与顶点连接的 y 位置。默认为 0 |
| orient | 标记相对于其附加形状的方向。可以是 "auto"、"auto-start-reverse" 或一个角度。默认为 0 |
带起始和结束标记的线条
以下示例创建了一条带有圆形起始标记和箭头结束标记的线
这是 SVG 代码
示例
<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="3" fill="black" />
</marker>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
</marker>
</defs>
<line x1="10" y1="10" x2="300" y2="200" stroke="red" stroke-width="3" marker-start="url(#circle)" marker-end="url(#arrow)" />
</svg>
自己动手试一试 »
代码解释
<defs>元素包含两个标记：一个#circle标记和一个#arrow标记- 标记的形状定义在
<marker>元素中 - 第一个
<marker>元素包含一个<circle>元素，用于绘制一个小圆 - 第二个
<marker>元素包含一个<path>元素，用于绘制一个小三角形 <line>元素使用marker-start属性和marker-end属性引用了两个标记
添加中间标记
以下示例创建了一个带有起始标记、中间标记和结束标记的折线
这是 SVG 代码
示例
<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="2" fill="black" />
</marker>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
</marker>
</defs>
<polyline points="15,40 15,170 200,170" stroke="red" stroke-width="3" fill="none" marker-start="url(#circle)" marker-mid="url(#circle)" marker-end="url(#arrow)" />
</svg>
自己动手试一试 »
代码解释
<defs>元素包含两个标记：一个#circle标记和一个#arrow标记- 标记的形状定义在
<marker>元素中 - 第一个
<marker>元素包含一个<circle>元素，用于绘制一个小圆 - 第二个
<marker>元素包含一个<path>元素，用于绘制一个小三角形 <polyline>元素使用marker-start属性、marker-mid属性和marker-end属性引用了两个标记- 注意
marker-start属性和marker-mid属性都指向同一个标记（#circle）。这样标记就可以被重复使用多次
