要想通過SVG繪制出復(fù)雜的圖形一般會通過專業(yè)的繪圖工具Adobe Illustrator之類的，直接會生成svg的文件。當(dāng)然為了達(dá)到更好的觸類旁通的學(xué)習(xí)效果，我還是引入了個(gè)svg的簡單實(shí)現(xiàn)，初步講解下svg的一些運(yùn)用

參考右邊HTML靜態(tài)結(jié)構(gòu)代碼區(qū)域，在圣誕樹之上的星星是靠svg實(shí)現(xiàn)的，如果需要實(shí)現(xiàn)這樣一個(gè)簡單的繪圖看看涉及哪些方面的知識點(diǎn)。

在本節(jié)中包括了polygon、defs、linearGradient三個(gè)小知識點(diǎn)

繪制形狀

在svg中繪制多邊形的標(biāo)簽是polygon，這是SVG中定義的基本形狀，可以通過polygon的points繪制出多邊形組成的坐標(biāo)點(diǎn)，points 屬性定義多邊形每個(gè)角的 x 和 y 坐標(biāo)。多邊形至少要有3個(gè)邊，所以points至少要定義3組坐標(biāo)才能創(chuàng)建一個(gè)三角圖形?？梢杂^察下points中是由6組坐標(biāo)繪制的一個(gè)五角星圖（當(dāng)然我是用工具生成的坐標(biāo)）

填充顏色

默認(rèn)svg會用是黑色填充顏色，所以我們需要設(shè)置新的顏色。一般可以通過fill填充顏色。同時(shí)svg也是dom節(jié)點(diǎn)也可以通過style直接用樣式屬性設(shè)計(jì)元素的樣式。這里填充顏色用到了linearGradient元素。

線性漸變

使用linearGradient元素即可定義線性漸變，每一個(gè)漸變色成分使用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. 需要給漸變色元素設(shè)置id值，否則的話，別的元素?zé)o法使用這個(gè)漸變色。
3. 漸變色的成員使用stop定義，它的屬性也可以使用CSS定義；它支持class，id這種標(biāo)準(zhǔn)HTML都支持的屬性。其它常用屬性如下：
offset屬性：這個(gè)定義了該成員色的作用范圍，該屬性取值從0%到100%(或者是0到1)；通常第一種顏色都是設(shè)置成0%，最后一種設(shè)置成100%。
stop-color屬性：這個(gè)很簡單，定義了該成員色的顏色。
stop-opacity屬性：定義了成員色的透明度。
x1,y1,x2,y2屬性：這兩個(gè)點(diǎn)定義了漸變的方向，默認(rèn)不寫的話是水平漸變，上面例子中同時(shí)也創(chuàng)建了一個(gè)垂直漸變。
4. 漸變色的使用，如例子中所示，直接用url(#id)的形式賦值給fill或者stroke就可以了。