要想通过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 可将课程添加到书签
举报
