markerUnits markerWidth markerHeight 的替代值的影響
繪圖示記的預設設定是使用呼叫元素的筆觸寬度,但你可以通過指定 markerUnits="userSpaceOnUse"
顯式指定使用單位系統繪製標記所應用元素的標記。標記被繪製到 3x3 markerUnits 框中(如果未指定 markerUnits,則為 3 個筆劃寬度)。但是可以使用 markerHeight
和 markerWidth
明確指定框的寬度和高度。請參閱下文,瞭解 markerUnits
,markerHeight
和 markerWidth
的各種組合的效果。
<svg width="800px" height="600px">
<defs>
<marker id="marker1"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="1" markerHeight="1">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker2"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="4" markerHeight="4">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker3"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="15">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker4"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="30" markerHeight="30">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<line x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />
<text x="20" y="150"> markerUnits = strokeWidth </text>
<text x="20" y="170"> markerWidth|Height = 1 </text>
<line x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />
<text x="250" y="150"> markerUnits = strokeWidth </text>
<text x="250" y="170"> markerWidth|Height = 4 </text>
<line x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />
<text x="20" y="390"> markerUnits = userSpaceOnUse </text>
<text x="20" y="410"> markerWidth|Height = 15 </text>
<line x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />
<text x="250" y="390"> markerUnits = userSpaceOnUse </text>
<text x="250" y="410"> markerWidth|Height = 30 </text>
</svg>