5-3 SVG星星
本节编程练习不计算学习进度，请电脑登录imooc.com操作

SVG星星

要想通过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就可以了。

任务

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>圣诞主题</title>
  7. </head>
  8.  
  9. <body>
  10.     <section class="container">
  11.         <!-- 星星1 -->
  12.         <svg viewBox="0 0 1000 800">
  13.             <polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713"></polygon>
  14.         </svg>
  15.         <!-- 星星2 -->
  16.         <svg viewBox="0 0 1000 800">
  17.             <polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
  18.         </svg>
  19.         <!-- 星星3 -->
  20.         <svg viewBox="0 0 1000 800">
  21.             <defs>
  22.                 <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%">
  23.                     <stop offset="0%" stop-color="#FCF0BC"></stop>
  24.                     <stop offset="0%" stop-color="#FCF0BC"></stop>
  25.                 </linearGradient>
  26.             </defs>
  27.             <polygon style="fill: url(#star);" points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
  28.         </svg>
  29.     </section>
  30. </body>
  31.  
  32. </html>
  33.  
下一节