SVG之Path
一、Path概述
1、控制命令
SVG提供了一些基礎圖形元素標簽如<circle>、<rect>、<ellipse>、<line>、<polyline>等，但是如果我們想要繪制一些特別的形狀，比如一些曲線，那么我們就需要使用<path>標簽，即路徑標簽。如果你足夠熟練<path>，你可以使用它繪制任何圖形！
<path>標簽提供了一些路徑控制命令，如下：
2、格式
3、簡單的演示編輯器
下面是一個簡單的path演示器，我們可以輸入控制命令來動態生成路徑：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>path直線演示</title>
6 <style>
7 html, body {
8 margin: 0;
9 padding: 0;
10 }
11 #svg {
12 display: block;
13 width: 100%;
14 height: 100%;
15 }
16 textarea {
17 display: block;
18 position: absolute;
19 bottom: 0;
20 left: 0;
21 width: 98%;
22 height: 80px;
23 border: 0;
24 border-top: 2px solid gray;
25 font-size: 30px;
26 outline: none;
27 padding: 0 1%;
28 margin: 0;
29 font-size: 30px;
30 }
31 </style>
32 </head>
33 <body>
34 <!--控件-->
35 <textarea id="pathString" placeholder="輸入path命令"></textarea>
36 <svg xmlns="http://www.w3.org/2000/svg" width="1400" height="600">
37 <path id="path" fill="none" stroke="red" stroke-width="2"></path>
38 </svg>
39 </body>
40 <script type="text/javascript">
41 //oninput事件：當用戶進行表單輸入時觸發
42 pathString.oninput = function(){
43 document.getElementById('path').setAttribute('d',pathString.value);
44 };
45 </script>
46 </html>
二、移動和直線命令
我們使用上面的編輯器來演示一下：
三、弧線命令
SVG的弧線使用A（rx,ry.xr,laf,sf,x,y）命令來完成，原理是通過截取一個橢圓的弧線而得到想要的弧線，
那么我們首先要構造一個橢圓：使用rx，ry，xr三個參數來構造這個橢圓，rx是橢圓的x半軸長，ry是y半軸長，xr是是弧線所在橢圓的長軸角度。
其次，我們發現這樣構造出來的橢圓其實有兩種，而起點到終點的弧線有四種，所以我們需要使用laf、sf、x、y四個參數來選擇想要的弧線。laf表示是否選擇較長弧，sf表示是否選擇逆時針方向那條弧。
我們同樣使用編輯器來感受一下：
四、貝塞爾曲線命令
1、貝塞爾曲線概述
上面我們說到A命令可以繪制弧線，但是很多時候還是難以畫出想要的效果，所以我們常常使用貝塞爾工具進行二維繪圖。我們要使用好這個繪圖工具，我們就需要明白其中的原理。
貝塞爾曲線由法國數學家Pierre Bézier發明。貝塞爾曲線就是這樣的一條曲線，它是依據四個位置任意的點坐標繪制出的一條光滑曲線。在歷史上，研究貝塞爾曲線的人最初是按照已知曲線參數方程來確定四個點的思路設計出這種矢量曲線繪制法。貝塞爾曲線的有趣之處更在于它的“皮筋效應”，也就是說，隨著點有規律地移動，曲線將產生皮筋伸引一樣的變換，帶來視覺上的沖擊。1962年，法國數學家Pierre Bézier第一個研究了這種矢量繪制曲線的方法，并給出了詳細的計算公式，因此按照這樣的公式繪制出來的曲線就用他的姓氏來命名是為貝塞爾曲線。
百科：貝塞爾曲線是計算機圖形圖像造型的基本工具，是圖形造型運用得最多的基本線條之一。它通過控制曲線上的四個點（起始點、終止點以及兩個相互分離的中間點）來創造、編輯圖形。其中起重要作用的是位于曲線中央的控制線。這條線是虛擬的，中間與貝塞爾曲線交叉，兩端是控制端點。移動兩端的端點時貝塞爾曲線改變曲線的曲率（彎曲的程度）；移動中間點（也就是移動虛擬的控制線）時，貝塞爾曲線在起始點和終止點鎖定的情況下做均勻移動。注意，貝塞爾曲線上的所有控制點、節點均可編輯。這種“智能化”的矢量線條為藝術家提供了一種理想的圖形編輯與創造的工具。
也許很多點我們一時間很難理解，我們現在的目標是認識貝塞爾曲線的大體描述，然后慢慢在實踐運用中理解其中含義。下面是4種中間點不存在、存在一個中間點、存在兩個中間點、存在三個中間點的情況，我們能夠繪制二次貝塞爾曲線和三次貝塞爾曲線，即圖2和圖3：
2、二次貝塞爾曲線命令：Q
兩次貝塞爾曲線有一個中間點，quadratic是兩次的，二次方程式的意思，所以使用Q命令來進行二次貝塞爾曲線繪制。利用編輯器：
3、三次貝塞爾曲線命令：C
三次貝塞爾曲線有兩個中間點三條線段，cubic是三次的，立方的的意思，所以使用C命令來繪制三次貝塞爾曲線。利用編輯器：
4、光滑貝塞爾曲線
這里說的光滑曲線其實是鏡像曲線，比如下面這個三次曲線，如果我們需要繪制一條鏡像對稱的光滑曲線，我們應該使用C250,300 400,300 400,200來進行繪制，為了方便書寫，我們省略鏡像對稱點（圖中的藍色點），進而用S命令來表示即可：S400,300 400,200。
簡單理解就是S命令和T命令省略了上一次曲線最后一個控制點關于終點鏡像對稱的下一次曲線第一個控制點的書寫。（圖中的藍點不用作為參數寫出來）。
如果需要模擬更多的貝塞爾曲線，可自行搜索或參考：
http://cubic-bezier.com/
http://myst729.github.io/bezier-curve/
5、知識回顧與拓展思考
總結
- 上一篇： 信用卡界四大神卡 信用卡里的四大神卡是什
- 下一篇： 敏捷开发方法