SVG <marker>
SVG 标记 - <marker>
The <marker> 元素用于创建用于 <line>、<path>、<polyline> 或 <polygon> 的开始、中间和结束的标记。
所有 SVG 标记都定义在 <defs> 元素内。<defs> 元素代表 "定义"，它包含特殊元素的定义（例如标记）。
标记使用 marker-start、marker-mid 和 marker-end 属性附加到形状。
The <marker> 元素具有六个基本属性来定位和设置标记的大小
| 属性 | 描述 |
|---|---|
| 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>
自己试试 »
代码解释
- The <defs> 元素包含两个标记：一个 <circle> 标记和一个 <arrow> 标记
- 标记的形状在 <marker> 元素中定义
- 第一个 <marker> 元素包含一个 <circle> 元素，它绘制一个小圆圈
- 第二个 <marker> 元素包含一个 <path> 元素，它绘制一个小三角形
- The <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>
自己试试 »
代码解释
- The <defs> 元素包含两个标记：一个 <circle> 标记和一个 <arrow> 标记
- 标记的形状在 <marker> 元素中定义
- 第一个 <marker> 元素包含一个 <circle> 元素，它绘制一个小圆圈
- 第二个 <marker> 元素包含一个 <path> 元素，它绘制一个小三角形
- The <polyline> 元素使用 marker-start 属性、marker-mid 属性和 marker-end 属性引用这两个标记
- 请注意，marker-start 属性和 marker-mid 属性指向同一个标记 (<circle>)。这样就可以多次重复使用标记
