[翻譯svg教程]Path元素 svg中最神奇的元素！

先看一個實例

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50
             A30,30 0 0,1 35,20
             L100,100
             M110,110
             L100,0"
          style="stroke:#660000; fill:none;"/>    
</svg>

 

效果圖

看效果圖有兩條直線和一條曲線 但是代碼裏面只有一個path 是不是很神奇！

在path 元素中，所有和繪製有關的命令都在d這個屬性中

在實例中  M 表示移動畫筆的命令

         A 表示用畫筆畫圓的命令

         L 表示用畫筆畫直線的命令

設置和移動畫筆

在繪製時候，第一個命令永遠都是 M 移動命令，你想要繪製任何圖形，首先你要移動畫筆到某一個地方，M命令就是移動的命令

例如這個例子

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50"
          style="stroke:#660000; fill:none;"/>
</svg>

 

這個例子把畫筆移動到了50,50這點，下次繪製將從此開始。

畫直線

我的智商只會畫直線，所以先看看如何畫直線

畫直線也是在path中最簡單的命令，用L或者l就可以畫直線

例如

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50
             L100,100"
          style="stroke:#660000; fill:none;"/>
</svg>

這個例子從50 50 這點開始畫線到100,100這點結束，效果圖如下

大些L和小寫的L的區別在哪呢

L 是絕對定位

l 是相對定位

繪製中需要移動畫筆

繪製的圖形總是從上一次結束的那個點開始繪製，鏈接到新的點，每一個繪製命令都是執行一個繪製命令後，拿到一個結束的點，畫筆繪製移動到最後的一個點上，下一次繪製將從這個點開始。

畫弧線

通過path 元素畫圓，使用命令 A或者a,和畫線類似，A表示絕對座標   a表示 相對座標

例如

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50
             A30,50 0 0,1 100,100"
          style="stroke:#660000; fill:none;"/>
</svg>

結果如下

 

這個例子 從點 50,50 到點100,100 畫了個曲線（圓的一部分）

A30,50 0 0,1 100,100 這幾個參數含義的解釋

第一個參數：rx (radius in x-direction) x方向的半徑

第二個參數：ry (radius in y-direction) y方向的半徑

如果兩個參數一樣的話就是 圓弧  如果不相等就是橢圓弧

第三個參數：x-axis-rotation   個人理解是內弧線還是外弧線，內弧線面積值爲0 外弧線值爲1

第四個參數：large-arc-flag determines whether to draw the smaller or bigger arc satisfying the start point

第五個參數sweep-flag  個人理解 相對平滑的弧線開關 就是一個圓分兩半 選擇弧線平滑的方向

代碼如下

<path d="M40,20  A30,30 0 0,0 70,70"
    style="stroke: #cccc00; stroke-width:2; fill:none;"/>
黃色
<path d="M40,20  A30,30 0 1,0 70,70"
    style="stroke: #ff0000; stroke-width:2; fill:none;"/>
紅色
<path d="M40,20  A30,30 0 1,1 70,70"
    style="stroke: #00ff00; stroke-width:2; fill:none;"/>

綠色

<path d="M40,20  A30,30 0 0,1 70,70"
    style="stroke: #0000ff; stroke-width:2; fill:none;"/>

藍色

效果如下

太複雜了暈了。。。。

還有更復雜的，我看暈了。。。

http://tutorials.jenkov.com/svg/path-element.html