SVG 的 path

SVG 有一個超強的路徑設定功能 path , 可以用最少的字串，描述出任何的線段，這個設計肯定是工程師大腦做出來的，這個功能也是 SVG 最精華的部份，指令說明如下： **指令大寫表示絕對座標，小寫表示相對座標** ``` M x,y - 移動點位到 x,y L x,y - 線段到 x,y H x - 橫線到 x V y - 垂直線到 y C x1,y1,x2,y2,x,y - 貝滋曲線 x1,y1 和 x2,y2 為控制點，終點在 x,y S x2,y2,x,y - 貝滋曲線 x1,y1 為前一個曲線的映射點，新增控制點 x2,y2，終點在 x,y Q x12,y12,x,y - 貝滋曲線 x12=x1=x2 , y12=y1=y2 兩個控制點在同一點，終點在 x,y T x,y - 貝滋曲線，前面必須是 Q , 控制點為 Q 的映射點，終點在 x,y Z - 連回線段的起點 A rx,ry,d,f1,f2,x,y - 圓弧 rx,ry : 橢圓長和寬的半徑, 如果長度小於和終點 x,y 的長度，則 rx,ry 會修正為和終點的距離 d : 橢圓旋轉角度 (順時針) f1 : 0=小角度弧線, 1=大角度弧線 f2 : 0=逆時針方向, 1=順時針方向 x,y : 終點 ``` 範例 : ``` $mmcode(r1) ``` <div class="mmresult r1"> <svg style="width:120px;height:120px;border:1px solid black"> <g style="stroke:#0000ff;fill:none"> <path d="M10,50 L50,10 H100 V50 C100,100,20,100,50,50 Z"/> </g> <g style="stroke:#ff0000;fill:none"> <circle cx=100 cy=100 r=3/> <circle cx=20 cy=100 r=3/> <line x1=100 y1=50 x2=100 y2=100/> <line x1=20 y1=100 x2=50 y2=50/> </g> </svg> <svg style="width:140px;height:120px;border:1px solid black"> <g style="stroke:#0000ff;fill:none"> <path d="M10,50 C20,10,40,10,50,50 S120,100,100,50"/> </g> <g style="stroke:#ff0000;fill:none"> <circle cx=20 cy=10 r=3/> <circle cx=40 cy=10 r=3 fill="#0f0"/> <circle cx=60 cy=90 r=3 fill="#0f0"/> <circle cx=120 cy=100 r=3/> <line x1=10 y1=50 x2=20 y2=10/> <line x1=40 y1=10 x2=60 y2=90 stroke="#0c0"/> <line x1=120 y1=100 x2=100 y2=50/> </g> </svg> <svg style="width:120px;height:120px;border:1px solid black"> <g style="stroke:#0000ff;fill:none"> <path d="M10,50 Q20,10,50,50 T100,50"/> </g> <g style="stroke:#ff0000;fill:none"> <circle cx=20 cy=10 r=3 fill="#0f0"/> <circle cx=80 cy=90 r=3 fill="#0f0"/> <line x1=10 y1=50 x2=20 y2=10/> <line x1=20 y1=10 x2=80 y2=90 stroke="#0c0"/> <line x1=80 y1=90 x2=100 y2=50/> </g> </svg> <br> svg 最難理解的 Arc 這裡設了幾個範例，當旋轉 90 度後的紫色，因為短邊半徑 30 , 等於直徑 60 小於離終點的距離 (100) ，於是依照比例被放大了<br> <svg style="width:220px;height:180px;border:1px solid black"> <g style="stroke:#0000ff;fill:none;stroke-width:2"> <path d="M10,50 L50,50 A70,30, 0,0,0,150,50 L200,50" stroke="#00f"/> <path d="M10,50 L50,50 A70,30, 0,1,0,150,50 L200,50" stroke="#f00"/> <path d="M10,50 L50,50 A70,30,20,1,0,150,50 L200,50" stroke="#0d0"/> <path d="M10,50 L50,50 A70,30,90,1,0,150,50 L200,50" stroke="#b0b"/> </g> </svg> </div> 既然瞭解 path 的用法，就可以來畫一些有趣的圖了 ``` $mmcode(r2) ``` <div class="mmresult r2"> <svg viewbox="-1,-1,102,102" style="width:100px;height:100px"> <circle cx=50 cy=50 r=50 fill="#fff" stroke="#000"/> <path d="M50,0 A1,1,0,0,1,50,50 A1,1,0,0,0,50,100 A1,1,0,0,0,50,0" stroke="#000" fill="#000"/> <circle cx=50 cy=25 r=5 fill="#000" stroke="#000"/> <circle cx=50 cy=75 r=5 fill="#fff" stroke="#fff"/> </svg> </div>