SVG绘图
Scalable Vector Graphic，可缩放向量图
在H5标准之前的使用方法：SVG标签不能直接书写在网页中，只能编写在独立的XML文档中；
网页中使用<img src="x.svg">进行嵌入
纳入H5标准后的使用方法：SVG标签可以直接书写在网页中。
Canvas与SVG的不同：
(1)Canvas是位图；SVG是矢量图
(2)Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)
(3)Canvas内容不能使用CSS；SVG内容可以使用CSS；
(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定
常用的SVG图形：
(1)矩形
<rect width="100" height="50" x="400" y="350" fill="#f0f" fill-opacity="0.3" stroke="#00f" stroke-width="6" stroke-opacity=".3"></rect>
(2)圆形
<circle r="100" cx="400" cy="300" fill="#f0f" fill-opacity="0.4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></circle>
(3)椭圆
<ellipse rx="100" ry="50" cx="400" cy="350" fill="#f0f" fill-opacity=".4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></ellipse>
(4)直线（没有fill只有stroke）
<line x1="45" y1="350" x2="450" y2="350" stroke="#f00" stroke-width="4px" stroke-opacity=".4"></line>
(5)折线（fill必须设置透明/stroke必须手工指定）
<polyline points="150,200 250,100 350,300 450,50" stroke="#00f" stroke-width="6" stroke-opacity=".4" fill="transparent"></polyline>
(6)多边形
<polygon points="100,150 100,300 400,300 400,150 250,220" fill="#f0f" fill-opacity=".4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></polygon>
(7)文本
<text alignment-baseline="before-edge" font-size="40" fill="#f0f" stroke="#00f">达内科技2018ajgy</text>
(8)图像
<image xlink:href="img/p3.png" x="400" y="200" width="100" height="200"></image>
扩展小知识：
(1)使用滤镜（高斯模糊）
参考MDN手册：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter
声明滤镜：
<filter id="f2">
<feGaussianBlur stdDeviation="3"></feGaussianBlur>
</filter>
使用滤镜：
<image/text/rect filter="url(#f2)">
(2)使用颜色渐变对象
声明渐变对象：
<linearGradient id="g2" x1="0" y1="0" x2="100%" y2="0">
<stop offset="0" stop-color="red"></stop>
<stop offset="0.5" stop-color="yellow"></stop>
<stop offset="1" stop-color="green"></stop>
</linearGradient>
使用渐变对象：
<text/rect fill="url(#g2)" stroke="url(#g2)">
