替代值對 refX refY 和 orient 的影響
用於繪製由 refX
和 refY
指定的標記的軸偏移在 orient
引數指定的旋轉之前應用。下面你可以看到 orient
和 refX
,refY
的各種組合的效果來說明這一點。
<svg width="800px" height="600px">
<defs>
<marker id="marker1"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto" >
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker2"
viewBox="0 0 10 10" refX="0" refY="0" orient="0" >
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker3"
viewBox="0 0 10 10" refX="20" refY="20" orient="0" >
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker4"
viewBox="0 0 10 10" refX="20" refY="20" orient="180" >
<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"> refX,Y (0,5) orient (auto) </text>
<line x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />
<text x="220" y="150"> refX,Y (0,0) orient (0) </text>
<line x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />
<text x="20" y="390"> refX,Y (20,20) orient (0) </text>
<line x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />
<text x="220" y="390"> refX,Y (20,20) orient (180) </text>
</svg>