繪制形狀

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

填充顏色

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

線性漸變

使用linearGradient元素即可定義線性漸變，每一個漸變色成分使用stop元素定義

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屬性：這兩個點定義了漸變的方向，默認不寫的話是水平漸變，上面例子中同時也創(chuàng)建了一個垂直漸變。

4. 漸變色的使用，如例子中所示，直接用url(#id)的形式賦值給fill或者stroke就可以了。

查看全部

2

采集

收起

2018-03-22

總結

以上是生活随笔為你收集整理的html编译圣诞情缘,H5+JS+CSS3 实现圣诞情缘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。