SVG 對於線段有個有用的設定是 marker , 可以用來設定線段的起點、中間點，和終點的圖示
marker 的參數 :
viewBox 設定 icon 大小，格式為 "x y 寬 高"
refX 設定 icon 的原點座標
refY
markerWidth 設定 icon 要縮放的大小
markerHeight
orient 設定 icon 旋轉角度，設 auto 的話會自動隨者線段旋轉，auto-start-reverse 則起點會反過來
使用時只要加上 marker-start(#ID) , marker-mid(#ID) , marker-end(#ID) 即可
<svg style="background-color:#ffa" width="300" height="140">
<defs>
<marker id="a11221_m01" viewBox="-10 -10 20 20" refX="0" refY="0" markerWidth="15" markerHeight="15">
<circle cx="0" cy="0" r="10" fill="#f008"></circle>
</marker>
<marker id="a11221_m02" viewBox="0 0 20 20" refX="10" refY="10" markerWidth="15" markerHeight="15">
<rect x="0" y="0" width="20" height="20" fill="#0f08"></rect>
</marker>
<marker id="a11221_m03" viewBox="0 0 20 20" refX="10" refY="10" markerWidth="15" markerHeight="15" orient="auto">
<polygon points="0,0 20,10 0,20" fill="#00f8"></polygon>
</marker>
</defs>
<path id="a11221_p01" d="M20,20 80,120 140,20 200,120 260,20" stroke="#000" stroke-width="1" fill="none" marker-start="url(#a11221_m01)" marker-mid="url(#a11221_m02)" marker-end="url(#a11221_m03)"></path>
</svg>
<style>
.a11221_bb
{
display:inline-block;
width:260px;
padding:4px;
}
</style>
<div class="a11221_bb">圖1：marker 的箭頭，一個長寬都是20方向向右的三角形<br>
<svg style="background-color:#ffa" width="260" height="140">
<defs>
<path id="a11221_p1" d="M30,20 L130,20 L230,20 L230,100 L100,60" fill="none" stroke="#000"></path>
</defs>
<path id="a11221_p2" d="M0,0 L20,10 L0,20z" fill="#f008"></path>
</svg>
</div>
<div class="a11221_bb">圖2：由 markerWidth 和 markerHeight 把箭頭設為 15x15<br>
<svg style="background-color:#ffa" width="260" height="140">
<defs>
<marker id="a11221_m1" viewBox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="15">
<use xlink:href="#a11221_p2"></use>
</marker>
</defs>
<use xlink:href="#a11221_p1" stroke-width="1" marker-start="url(#a11221_m1)" marker-mid="url(#a11221_m1)" marker-end="url(#a11221_m1)"></use>
</svg>
</div>
<div class="a11221_bb">圖3：加上 orient="45"，箭頭角度向右旋轉 45 度<br>
<svg style="background-color:#ffa" width="260" height="140">
<defs>
<marker id="a11221_m3" viewBox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="15" orient="45">
<use xlink:href="#a11221_p2"></use>
</marker>
</defs>
<use xlink:href="#a11221_p1" stroke-width="1" marker-start="url(#a11221_m3)" marker-mid="url(#a11221_m3)" marker-end="url(#a11221_m3)"></use>
</svg>
</div>
<div class="a11221_bb">圖4：加上 orient="auto" 後，箭頭角度會隨著線旋轉<br>
<svg style="background-color:#ffa" width="260" height="140">
<defs>
<marker id="a11221_m4" viewBox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="15" orient="auto">
<use xlink:href="#a11221_p2"></use>
</marker>
</defs>
<use xlink:href="#a11221_p1" stroke-width="1" marker-start="url(#a11221_m4)" marker-mid="url(#a11221_m4)" marker-end="url(#a11221_m4)"></use>
</svg>
</div>
<div class="a11221_bb">圖5：加上 orient="auto-start-reverse" 後，起點的箭頭角度會旋轉 180 度<br>
<svg style="background-color:#ffa" width="260" height="140">
<defs>
<marker id="a11221_m5" viewBox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="15" orient="auto-start-reverse">
<use xlink:href="#a11221_p2"></use>
</marker>
</defs>
<use xlink:href="#a11221_p1" stroke-width="1" marker-start="url(#a11221_m5)" marker-mid="url(#a11221_m5)" marker-end="url(#a11221_m5)"></use>
</svg>
</div>
<div class="a11221_bb">圖6：當線條寬度設為 2 時 (stroke-width="2") 箭頭也隨著增大兩倍<br>
<svg style="background-color:#ffa" width="260" height="140">
<defs>
<marker id="a11221_m6" viewBox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="15" orient="auto-start-reverse">
<use xlink:href="#a11221_p2"></use>
</marker>
</defs>
<use xlink:href="#a11221_p1" stroke-width="2" marker-start="url(#a11221_m6)" marker-mid="url(#a11221_m6)" marker-end="url(#a11221_m6)"></use>
</svg>
</div>
圖1：marker 的箭頭，一個長寬都是20方向向右的三角形
圖2：由 markerWidth 和 markerHeight 把箭頭設為 15x15
圖3：加上 orient="45"，箭頭角度向右旋轉 45 度
圖4：加上 orient="auto" 後，箭頭角度會隨著線旋轉
圖5：加上 orient="auto-start-reverse" 後，起點的箭頭角度會旋轉 180 度
圖6：當線條寬度設為 2 時 (stroke-width="2") 箭頭也隨著增大兩倍
沒有留言:
張貼留言