基本內容
什麼是SVG? 全稱為Scalable Vector Graphics，是一種使用XML技術描述二維圖形的語言，簡單來說 - 向量圖(不失真)
SVG與HTML5的關係
早在HTML5之前,存在SVG技術 SVG副檔名為".svg" 在HTML5出現之前,要在HTML頁面中引入SVG檔案 在HTML5出現之後,將SVG內容直接定義在HTML頁面中
SVG的優勢
可以使用文字編輯器建立和修改，SVG可被搜尋、索引等，SVG繪製的影象不失真的
SVG與Canvas的區別
SVG不依賴於解析度，使用DOM或繫結事件，實現大型渲染區域的應用(地圖類) Canvas依賴於解析度，不能使用DOM或繫結事件的，執行時以圖片形式出現".jpg" SVG的標準也是W3C定製的
設定樣式
1.通過元素的屬性方式 fill - 設定填充樣式 fill-opacity - 設定填充透明度 stroke - 設定描邊樣式 stroke-width - 設定邊框的寬度
2.通過style屬性,使用類似於CSS屬性設定方式 注意 - 不能使用CSS中的樣式進行設定 transform屬性，用於設定轉換效果 方法有：rotate()、scale()、translate()
繪製圖形
矩形元素-
<rect x="" y="" width="" height="" rx="" ry="" />
複製程式碼x和y - 繪製矩形的左上角座標值
width和height - 設定繪製矩形的寬度和高度
rx和xy - 設定圓角矩形
圓形元素 -
<circle cx="" cy="" r="" />
複製程式碼cx和cy - 繪製圓形的圓心座標值
cx和cy不設定值的話,預設為(0,0)
r - 繪製圓形的半徑
橢圓元素-
<ellipse cx="" cy="" rx="" ry="" />
複製程式碼cx和cy - 繪製橢圓的圓心座標值
rx - 繪製橢圓的水平方向的半徑
ry - 繪製橢圓的垂直方向的半徑
注意：當rx和ry的值相同時,繪製的是圓形
線條元素-
<line x1="" y1="" x2="" y2="" />
複製程式碼x1和y1 - 繪製直線的起點座標值
x2和y2 - 繪製直線的終點座標值
注意：繪製直線時,預設描邊顏色為白色 *
折線元素- 元素
<polyline points="" />
複製程式碼points - 折線的所有點座標值,都設定在該屬性中
注意：描邊顏色預設為白色,填充顏色預設為黑色
多邊形元素-
<polygon points="" />
複製程式碼points - 折線的所有點座標值,都設定在該屬性中
注意： SVG繪製圖形使用元素 單標籤 - 增加結束符"/" 起始標籤
特效元素
線性漸變 - 基準線
<defs>
<linearGradient id="grad" x1="基準線的起點座標值x" y1="基準線的起點座標值y" x2="基準線的終點座標值x" y2="基準線的終點座標值y">
<stop offset="0%~100%" stop-color="顏色" />
</linearGradient>
</defs>
<rect fill="url(#漸變元素的id)">
複製程式碼射線漸變 - 基準圓
<defs>
<radialGradient id="grad" fx="設定起點基準圓的圓心x" fy="設定起點基準圓的圓心y" cx="設定終點基準圓的圓心x" cy="設定終點基準圓的圓心y" r="設定終點基準圓的半徑">
<stop offset="0%~100%" stop-color="顏色" />
</radialGradient>
</defs>
<rect fill="url(#漸變元素的id)">
複製程式碼注意：線性漸變或射線漸變,設定基準線(圓)的座標值必須是百分值，允許為負值，允許為大於 100% 的值 設定漸變顏色位置必須是百分值 只能是從 0% ~ 100%
濾鏡元素 - 高斯模糊
濾鏡元素 - filter 元素
高斯模糊 - feGaussianBlur 元素