SVG 的 marker

SVG 對於線段有個有用的設定是 marker , 可以用來設定線段的起點、中間點，和終點的圖示 ``` marker 的參數 : viewBox 設定 icon 大小，格式為 "x y 寬 高" refX 設定 icon 的原點座標 refY markerWidth 設定 icon 要縮放的大小 markerHeight orient 設定 icon 旋轉角度，設 auto 的話會自動隨者線段旋轉，auto-start-reverse 則起點會反過來 ``` 使用時只要加上 <font color="#00f"><b>marker-start(#ID) , marker-mid(#ID) , marker-end(#ID)</b></font> 即可 ``` $mmcode(r0) ``` <div class="mmresult r0"> <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"/> </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"/> </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"/> </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)"/> </svg> </div> ``` $mmcode(r1) ``` <div class="mmresult r1"> <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" /> </defs> <path id="a11221_p2" d="M0,0 L20,10 L0,20z" fill="#f008" /> </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"/> </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)"/> </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"/> </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)"/> </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"/> </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)"/> </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"/> </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)"/> </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"/> </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)"/> </svg> </div> </div>