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

SVG概述

在之前的七夕主题中，在留言反馈中经常会有人说："这个怎么又是图片，还以为是画出来的"。其实我很想说：靠人工是很难画的。当然基于七夕的优化，我在圣诞中还是特意引入的一部分svg与canvas来做一些图形操作。SVG是基于xml标记语言可缩放矢量图形，支持无损缩放的同时也因为是dom节点，所以也支持事件，但是弊端也很明显，dom的数量非常大，复杂度高，渲染就比较慢了，也不适合游戏的开发，一般会用canvas之后会介绍

SVG有什么优势？

SVG的知识点太多了，这里不打算讲知识点，相信整个教程就算讲解SVG都不够，所以希望大家查阅相关的知识点。

圣诞主题中只引入一个简单的五角星的制作，这个其实可以通过工具生成，通过修正viewbox实现缩放

更详细的教程：SVG

任务

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.     <h3>例子一</h3>
  11.     <svg width="100px" height="50px">
  12.         <rect width="100px" height="50px" />
  13.     </svg>
  14.     <h3>例子二</h3>
  15.     <svg width="100px" height="50px">
  16.         <rect width="100px" height="50px" fill="blue" stroke="red" />
  17.     </svg>
  18. </body>
  19.  
  20. </html>
  21.  
下一节