可縮放矢量圖形SVG是基於可擴展標記語言……吧啦吧啦（百度百科上的定義嗯）
最近剛剛忙完我們隊的一個項目的網站，裏面雖然主要用的不是svg，只是很小的一個效果用到了，但是用的時候查閱一下資料啥的感覺像是打開了新世界的大門（可能是太菜的緣故之前都沒怎麼用過svg）
所以想總結一下關於svg裏面的path以及animate用法以及自己的體會
例子
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
這裏svg就是一個類似於畫布的東西，path中最核心的屬性就是 “d” 屬性，這個屬性就像一個虛擬的畫筆，根據屬性值來繪製圖形，上面例子詳情：先將畫筆移動到svg畫布的(150,0)位置，然後畫直線（L代表LineTo）到終點(75,200)，再畫直線到(225,200)。
d屬性預覽表
| 畫筆操作 | 參數 | 例子 | 解釋 |
|---|---|---|---|
| M | x,y | M150 40 | 畫筆移動到畫布上一點，位置由M後面的兩個數值決定 M150 40 移動到座標(150,40) |
| L | x,y | L250 0 | 畫直線到畫布上某一點，直線終點位置由L後面的兩個數值決定L250 0 畫直線到點(250,0) |
| H | x | H50 | 畫水平直線，H50 縱座標不變，從當前座標畫水平線到橫座標爲50處 |
| V | y | V200 | 畫豎直直線，V50 橫座標不變，從當前座標畫豎直線到縱座標爲50處 |
| C | x1,y1,x2,y2,x,y | 三次貝塞爾曲線(三次需要兩個控制點(x1 y1 x2 y2)和一個曲線終點(x y)) | |
| S | x2,y2,x,y | 光滑的三次貝塞爾曲線 | |
| Q | x1,y1,x,y | 二次貝塞爾曲線(二次需要一個控制點和一個曲線終點) | |
| T | x,y | 光滑的二次貝塞爾曲線 | |
| A | rx,ry,x-rotation,flag1,flag2,x2,y2 | 橢圓曲線，rx,ry代表橢圓的兩個半軸長，如果想要畫圓就將這兩個參數設置相等（居然還能記得專業名詞不容易2333） x-rotation代表弧線繞x軸的旋轉角度 flag1表示從起始點到終點是畫大角度弧，還是小角度（1爲大角度，0爲小角度） flag2表示畫弧的方向是順時針還是逆時針（1爲順時針，0爲逆時針） x2,y2表示弧線的終點 表格後面會給出例子 |
|
| Z | 無參數 | 結束次路徑的繪製 |
注：小寫字符的指令參數和大寫字母是一樣的，只是後面的參數不是畫布上的絕對座標，而是相對於畫筆當前的位置在x和y軸上移動的距離
橢圓例子
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M60,60 A30,30 0 0,0 85,85"
style="stroke: yellow; stroke-width:2; fill:none;"/>
<path d="M60,60 A30,30 0 1,0 85,85"
style="stroke: red; stroke-width:2; fill:none;"/>
<path d="M60,60 A30,30 0 1,1 85,85"
style="stroke: green; stroke-width:2; fill:none;"/>
<path d="M60,60 A30,30 0 0,1 85,85"
style="stroke: blue; stroke-width:2; fill:none;"/>
</svg>
首先圓上兩點確定，半徑確定，能且只能確定兩個圓，再由兩點連線分隔就是四個圓弧，上面代碼一共四條路徑，也是四條弧線，首先因爲rx和ry都是一樣的，所以是正圓弧，x-rotation都是0，主要在於flag1和flag2取不同值的效果，都是從點(60,60)到(85,85)的圓弧，
- 第一個path黃色的小圓弧，flag1=0，flag2=0，小角度弧，逆時針
- 第二個path紅色的小圓弧，flag1=1，flag2=0，大角度弧，逆時針
- 第三個path綠色的小圓弧，flag1=1，flag2=1，大角度弧，順時針
- 第四個path藍色的小圓弧，flag1=0，flag2=1，小角度弧，順時針
貝塞爾曲線
比較懶，這是百度百科上面的關於貝塞爾曲線的公式講解，咱就只看到三次的好了，通用的太複雜嗯
每個公式裏面的P0、P1、P2這些都是對應上面提到的path的d屬性中的n次貝塞爾曲線變換（C，S，Q，T）的參數裏面的x1，y1，x2，y2，x，y以及畫貝塞爾曲線之前畫筆所在的位置（即貝塞爾曲線起始位置），每個點的橫座標代入求出點B的橫座標（縱座標同理）
咳咳，不過，不管作爲一個設計還是前端，估計都很難直接用公式來看曲線樣式嗯，所以上面這公式都不重要
下面主要總結一下path d屬性中的C，S，Q，T幾種貝塞爾曲線
C，S 三次貝塞爾曲線
圖上的(x1,y1)，(x2,y2)，(x,y) 就是對應與C（Cx1 y1 x2 y2 x y）裏面的參數一一對應，(x0,y0)是執行C指令之前畫筆的位置
S也是三次貝塞爾曲線，但是其參數比C少了一個點，這是因爲，S必須在C指令後面使用，C畫了(x0,y0)到到(x1,y1)的部分，S會自動把C的(x2,y2)關於(x,y)做中心對稱，對稱點就是上圖右下角的那個點，該點作爲S的(x1,y1)，所以後面S的參數只需要指明x2 y2 x y就可以了（接着上面的C的效果畫的S的效果見下圖）
Q，T 二次貝塞爾曲線
二次貝塞爾曲線Q T 其實看起來就相當於把三次貝塞爾曲線的兩個控制點合二爲一
圖上的(x1,y1)，(x,y) 就是與Q（Qx1 y1 x y）裏面的參數一一對應T也是二次貝塞爾曲線，但是其參數比Q少了一個點，這是因爲，T必須在Q指令後面使用，T會自動把Q的(x1,y1)關於(x,y)做中心對稱，對稱點就是上圖右下角的那個點，該點作爲T的(x1,y1)，所以後面T的參數只需要指明x y就可以了（接着上面的Q的效果畫的T的效果見下圖）
animate標籤
animate 標籤包裹在path line text 等可以進行動畫的元素內部，通過改變外部包裹元素的某些屬性來產生動畫
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-size="30" y="60" x="0">
這個會左右移動嗯
<animate attributeName="x" from="0" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
</text>
</g>
</svg>上面這個例子是“這個會左右移動嗯”這幾個字的橫座標從0變爲60的動畫，歷時3秒，並且會一直不斷重複。
animate標籤的屬性
- attributeName
指定了animate修改的是動畫元素的哪個屬性，上面例子中就是指定改變text 的x屬性即橫座標 - from
指定屬性變化的初始值，例如例子中橫座標初始值是0，也就是從0開始變化 - to
指定屬性變化的終止值，例子中橫座標變化到最大值爲60 - begin
指定動畫開始時間，即從svg加載完成開始算 - dur
動畫執行過程需要的時間，也決定了動畫的快慢 - end
動畫結束的時刻