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）。這樣標記就可以被重複使用多次
