接上一篇：數據可視化-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>分析圖：
最終效果圖：
