接上一篇：資料視覺化-svg入門基礎（一），基礎一主要是介紹了svg概念，元素樣式設定等。
svg是（scalable vector graphic）伸縮向量影像。
一、目錄
（1）圖形元素
（2）文字元素
（3）特殊元素
（4）濾鏡元素
（5）漸變元素
二、圖形元素
1、矩形
矩形使用<rect></rect>標籤來進行繪製。
示例圖：
程式碼：
<svg width="200" height="200">
<rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="yellow"></rect>
</svg>引數說明：
（1）x：左上角x的座標，距離左邊的距離，相當於margin-left；
（2）y：左上角y的座標，距離頂部的距離，相當於margin-top；
（3）width：矩形的寬度；
（4）height：矩形的高度；
（5）rx：圓角矩形，x軸方向的半徑；
（6）ry：圓角矩形，y軸方向的半徑
（7）fill：填充顏色
2、圓形
圓形使用<circle></circle>標籤來進行繪製。
示例圖：
例項程式碼：
<svg width="200" height="200">
<circle cx="50" cy="50" r="40" fill="yellow"></circle>
</svg>引數說明：
（1）cx：圓形的x座標；
（2）cy：圓心的y做標；
（3）r：半徑
3、橢圓形
橢圓形使用標籤<ellipse></ellipse>標籤進行繪製，與圓形的繪製方法類似。
示例圖：
例項程式碼如下：
<svg width="200" height="200">
<ellipse cx="50" cy="50" rx="40" ry="20" fill="yellow"></ellipse>
</svg>引數說明：
cx：圓心的x座標；
cy：圓心的y座標；
rx：水平方向上的半徑；
ry：垂直方向上的半徑
4、線段
線段使用<line></line>標籤進行繪製。
例項程式碼
<svg width="200" height="200">
<line x1="10" y1="10" x2="90" y2="90" stroke="yellow"></line>
</svg>引數說明：
x1：起點的x座標；
y1：起點的y座標；
x2：終點的x座標；
y2：終點的y座標
5、折線和多邊形
折線和多邊形的繪製方法類似，都是用points屬性設定各個點的座標。
折線使用標籤<polyline></polyline>進行繪製，而多邊形使用標籤<polygon></polygon>進行繪製，且多邊形會將起點和終點連線起來，折線不會。
示例圖：
例項程式碼：
/* 圖一 折線，不會將起點與終點連線 */
<svg width="200" height="200">
<polyline points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polyline>
</svg>
/* 圖二 多邊形，將起點與終點連線 */
<svg width="200" height="200">
<polygon points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polygon>
</svg>引數說明：
ponits：設定各個點的座標，各組座標之間使用空格分隔，x座標和y座標之間使用逗號分開。
6、路徑
路徑使用標籤<path></path>進行繪製，使用d屬性控制路徑的型別和繪製。路徑的功能最多，前面的所有圖形都可以使用路徑進行繪製。
d屬性值的書寫有兩種，使用逗號分隔座標，如：d="M10, 10"，也可以使用空格的形式，如：d="M 10 10"
注意：大寫字母：表示座標系中使用絕對座標，小寫字母：使用相對座標（相對當前畫筆所在的點）
6.1移動類引數
M：moveto，將畫筆移動到指定座標，如：d="M10,10"，表示將畫筆移動到座標(10,10)的位置。
示例圖：
例項程式碼：
<svg width="200" height="200">
<path d="M 10 10 L 180 180" stroke="#fb3" stroke-width="4" fill="transparent"></path>
</svg>
6.2繪製直線類引數
L：lineto，繪製直線到指定座標，如：d="M 10 10 L 80 80"，表示繪製一條起點座標為(10,10)，終點座標為(80,80)的直線。
H：horizontal lineto，繪製水平直線到指定座標，如：d="M 10 10 H 100"，表示是繪製一條起點座標為(10,10)，終點座標為(100,10)的直線，注意：H只需要設定一個值，如果設定了多個值，則最後取最後一個值。
V：vertical，繪製垂直直線到指定座標，如：d="M 10 10 V 100"，表示繪製一條起點座標(10,10)，終點座標為(10,100)的直線，注意：V只需要設定一個值，如果是多個值，則取最後一個值。
6.3繪製曲線類引數
C：curveto，繪製三次方貝塞爾曲線到終點座標，中間經過兩個控制點控制曲線的弧度，所以需要制定三個座標來實現繪製曲線，如：d="M10,10 C40,5 40,140 100,100"
S：shorthand/smooth curveto，繪製平滑三次方貝塞爾曲線到終點座標，與上一條三次方貝塞爾曲線相連，第一個控制點為上一條曲線第二個控制點的對稱點，所以還需制定一個控制點座標和終點座標。如：d="M10,10 C40,5 40,140 100,100 S140,180 160,160"，如果不與貝塞爾曲線相連，即：d="M10,10 S140,180 160,160"，則繪製的圖線接近於二次貝塞爾曲線
Q：quadratic Bezier curveto，繪製二次貝塞爾曲線到終點座標，中間經過一個控制點控制曲線的弧度，如：d="M10,10 Q40,140 100,100"
T：shorthand/smooth quadratic Bezier curveto，繪製平湖二次貝塞爾曲線到終點座標，與上一條二次貝塞爾曲線相連，控制點為上一條曲線控制點的對稱點，所以還需指定一個終點座標，如：d="M10,10 Q40,140 100,100 T160,160"，如果不與貝塞爾曲線相連，即：d="M10,10 T160,160"，則繪製的圖線是一條直線。
示例圖：
例項程式碼：
/* 圖一 三次方貝塞爾曲線 */
<svg width="200" height="200">
<path d="M10,10 C40,5 40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>
/* 圖二 三次方貝塞爾曲線，與上一條曲線相連 */
<svg width="200" height="200">
<path d="M10,10 C40,5 40,140 100,100 S140,180 160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>
/* 圖三 二次貝塞爾曲線 */
<svg width="200" height="200">
<path d="M10,10 Q40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>
/* 圖四 二次方貝塞爾曲線，與上一條曲線相連 */
<svg width="200" height="200">
<path d="M10,10 Q40,140 100,100 T160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>
6.4繪製弧線類引數
A：el liptical arc，繪製橢圓曲線到指定座標，需設定的引數有：
（1）rx，ry：x軸方向半徑，y軸方向半徑；
（2）x-axis-rotation：x軸與水平順時針方向夾角；
（3）large-arc-flag：角度弧線大小(1：大，0：小)；
（4）sweep-flag：繪製方向(1：順時針，0：逆時針)；
（5）x y：終點座標
示例圖：
例項程式碼：
<svg width="500" height="500">
<path d="M50,50 A60 30 0 1,0 150,50 Z" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg> 分析：起點座標(50,50)，終點座標(150,50)，角度為0，角度弧線大小large-arc-flag為1，選擇大弧度，根據分析，即選擇紅色的弧線，又繪製方向sweep-flag為0，為逆時針，即從起點沿著逆時針方向繪製到終點，所以是紅色虎先位於下方。
注意：當 (起點與終點之間的直線距離／2) > (橢圓的水平半徑) 時，角度為0的情況下，此時橢圓會等比放大，到相等為止。
6.5閉合類引數
Z：closepath，繪製直線將終點與起點連線
再次提醒：大寫字母：表示座標系中使用絕對座標，小寫字母：使用相對座標（相對當前畫筆所在的點）
三、文字元素
1、基礎
在svg中使用<text></text>標籤繪製文字。
引數說明：
x：文字的x座標；
y：文字的y座標；
dx：相對於當前位置x方向的距離；
dy：相對於當前位置的y方向的距離；
textLength：文字的顯示長度；
rotate：旋轉角度，也可以使用transform="rotate(30)"
示例圖：
例項程式碼：
<svg width="200" height="200">
<text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20">示例文字</text>
</svg>
2、文字路徑
如果要實現文字沿著路徑進行排列，可使用<textPath></textPath>標籤來實現。需要提前定義好路徑path，並指定id，textPath使用xlink:href定義文字要匹配的路徑。
示例圖：
例項程式碼：
<svg width="600" height="600">
<path id="textPath1" d="M100,100 C140,50 140,240 200,200 S240,280 360,360" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
<text x="10" y="10" dx="-10" dy="-10" rotate="20">
<textPath xlink:href="#textPath1" textLength="300">
很扭曲的測試示例文字
</textPath>
</text>
</svg>
四、特殊元素
1、克隆元素use
use標籤用來克隆其他元素，克隆後的元素不能修改樣式。 示例圖：
示例程式碼：
<svg>
<rect id="rect1"
x="10" y="10" width="100" height="100"
stroke="#5588aa" stroke-width="5"
fill="transparent"
></rect>
<use x="20" y="20" xlink:href="#rect1"></use>
</svg>引數說明：
x：相對被克隆元素x軸偏移量；
y：相對被克隆元素y軸偏移量；
xlink:href：指向被克隆元素的ID
2、模板元素symbol
symbol標籤用定義模版，需要結合use標籤使用，模版在未被使用之前，不會展示在頁面上。模版內部可包含多個元素
示例程式碼：
<svg>
<symbol id="template1">
<rect x="10" y="10" width="100" height="100"
stroke="#5588aa" stroke-width="5"
fill="transparent"
></rect>
</symbol>
<use x="20" y="20" xlink:href="#template1"></use>
</svg>
3、組元素g
group的簡寫，用來建立分組，組內所有的元素都會繼承g的屬性，可以巢狀使用，也可以和use標籤結合使用。另外可使用transform屬性定義控制整個組的位置。
示例程式碼：
<svg>
<g stroke="#5588aa" stroke-width="5" fill="transparent">
<rect x="10" y="10" width="100" height="100"></rect>
<rect x="120" y="120" width="100" height="100"></rect>
</g>
</svg>g標籤內部的兩個矩形，都會繼承g標籤的樣式。
4、clipPath裁剪元素
lipPath元素主要用來剪裁元素，clipPath元素定義範圍外的內容將不會被展示。另外要注意寫在<clipPath></clipPath>標籤內部的元素不會被顯示，clipPath標籤需要放在defs標籤內。其他元素在引用clipPath元素時，需要使用clip-path="url(#ID)"。
示例程式碼：
<svg height="200" width="200">
<defs>
<clipPath id="clip">
<rect width="100" height="100"></rect>
</clipPath>
</defs>
<circle cx="90" cy="90" r="90" clip-path="url(#clip)" stroke="none" fill="yellow" />
</svg>分析圖：
最終效果圖：
