要想通過SVG繪制出復雜的圖形一般會通過專業的繪圖工具Adobe Illustrator之類的，直接會生成svg的文件。當然為了達到更好的觸類旁通的學習效果，我還是引入了個svg的簡單實現，初步講解下svg的一些運用
參考右邊HTML靜態結構代碼區域，在圣誕樹之上的星星是靠svg實現的，如果需要實現這樣一個簡單的繪圖看看涉及哪些方面的知識點。
在本節中包括了polygon、defs、linearGradient三個小知識點
繪制形狀
在svg中繪制多邊形的標簽是polygon，這是SVG中定義的基本形狀，可以通過polygon的points繪制出多邊形組成的坐標點，points 屬性定義多邊形每個角的 x 和 y 坐標。多邊形至少要有3個邊，所以points至少要定義3組坐標才能創建一個三角圖形?？梢杂^察下points中是由6組坐標繪制的一個五角星圖（當然我是用工具生成的坐標）
填充顏色
默認svg會用是黑色填充顏色，所以我們需要設置新的顏色。一般可以通過fill填充顏色。同時svg也是dom節點也可以通過style直接用樣式屬性設計元素的樣式。這里填充顏色用到了linearGradient元素。
線性漸變
使用linearGradient元素即可定義線性漸變，每一個漸變色成分使用stop元素定義
<linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#FCF0BC"></stop> <stop offset="0%" stop-color="#FCF0BC"></stop> </linearGradient>
1. 漸變色元素必須要放到defs元素中；
2. 需要給漸變色元素設置id值，否則的話，別的元素無法使用這個漸變色。
3. 漸變色的成員使用stop定義，它的屬性也可以使用CSS定義；它支持class，id這種標準HTML都支持的屬性。其它常用屬性如下：
offset屬性：這個定義了該成員色的作用范圍，該屬性取值從0%到100%(或者是0到1)；通常第一種顏色都是設置成0%，最后一種設置成100%。
stop-color屬性：這個很簡單，定義了該成員色的顏色。
stop-opacity屬性：定義了成員色的透明度。
x1,y1,x2,y2屬性：這兩個點定義了漸變的方向，默認不寫的話是水平漸變，上面例子中同時也創建了一個垂直漸變。
4. 漸變色的使用，如例子中所示，直接用url(#id)的形式賦值給fill或者stroke就可以了。
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報
