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