【面向HTML5--SVG绘图】

Canvas绘图和SVG绘图的比较：

-	Canvas	SVG
出现时间	随着H5标准诞生	2000年即存在，后纳入H5标签
绘图类型	位图	矢量图
如何绘制	使用JS函数绘制	使用H5标签绘制
事件绑定	每个图形无法绑定监听	每个图形都可以绑定事件监听
使用场合	颜色细腻，如游戏、统计图	无限缩放，如图标、统计图、地图

位图与矢量图的比较：

位图：Photoshop,由一个又一个颜色点组成，每个点由rgb指定。善于表现颜色的细节变化，放大后会失真——一般用于照片 —— Canvas绘图.

矢量图：Flash/AI,由一个又一个矢量线条/图形组成，每个图形指定方向和颜色即可。可以无限放大而不失真，不善于表现颜色的细节变化——一般用于设计图标、动画 —— SVG绘图

HTML5出现之前使用SVG的方法：

(1)创建一个XML文档，编写SVG的标签
(2)在HTML引用XML文档，使用在img、iframe、embed、object等HTML标签中。

HTML5出现之后使用SVG的方法：

H5标准把SVG标签纳入自己的标签库（有些SVG的特效标签被舍弃了），所有SVG标签可以直接出现在H5文档中。
注意：SVG标签中不能放置普通的HTML标签；SVG相关的标签页不能放在SVG画布外！
svg是300*150的 inline-block

1、使用SVG绘图 —— 绘制矩形

<rect width="宽" height="高" 
      x="x轴起点" y="y轴起点" 
      stroke="描变颜色" stroke-width="描边宽度" stroke-opacity="描边透明度">
</rect>

说明：
  (1)所有的SVG标签样式可以使用属性来声明，也可以使用CSS形式来声明——但其可用的样式属性都是专有的！普通的CSS样式属性对SVG元素是无效。
  (2) SVG标签属性都不是HTML DOM属性！可以使用核心DOM方式操作SVG标签属性——setAttribute()、getAttribute()
  (3)动态的创建新的SVG元素，可以使用HTML字符串拼接方式，
      也可以使用document.createElementNS() / svg.appendChild()方式

#r1:hover{
    stroke-opacity: 1;
    fill-opacity: 1;
}
circle{
    transition: all 1s linear;
}

2、使用SVG绘图 —— 绘制圆形

<circle r="半径" cx="圆点x轴坐标" cy="圆点y轴坐标" 
        fill="" stroke=" " stroke-width="" ....>
</circle>

3、使用SVG绘图 —— 绘制椭圆

 <ellipse rx="x轴半径" ry="y轴半径" cx="圆点x轴坐标" cy="圆点y轴坐标"></ellipse>

4、使用SVG绘图 —— 绘制直线

 <line x1="起点x轴坐标" y1="起点y轴坐标" x2="终点x轴坐标" y="终点y轴坐标" stroke="">
 </line>

注意：
1、所有的SVG图形默认只有fill没有stroke；而line元素不需要fill只需要stroke！
2、若多个SVG图形有一样的属性，可以声明在小组中，在小组上声明公共的属性，每个组员都会自动继承该属性。

5、使用SVG绘图 —— 绘制折线

//x1,y1 x2,y2 x3,y3表示折线各拐点的坐标
<polyline points="x1,y1 x2,y2 x3,y3 ..." stroke="" fill="transparent"></polyline>

6、使用SVG绘图 —— 绘制多边形

//x1,y1 x2,y2 x3,y3表示折线各拐点的坐标
<polygon points="x1,y1  x2,y2  x3,y3  ..."></polygon>

7、使用SVG绘图 —— 绘制文本

<text alignment-baseline="before-edge" font-size="40" font-family="SimHei" x="50" y="50">
    abyg中国
</text>

8、使用SVG绘图 —— 绘制图像

<image xlink:href="img/disc.png" width="300" height="50" x="100" y="100"></image>

9、SVG中使用特效对象——渐变对象

定义特效对象：

<defs>
    <linearGradient id="g2" x1="" y1="" x2="" y2="">
        <stop stop-color="" offset=""></stop>
        <stop stop-color="" offset=""></stop>
    </linearGraident>
</defs>

使用特效对象：

 <rect fill="url(#g2)" stroke="url(#g2)"></rect>

9、SVG中使用特效对象——滤镜(filter)——高斯模糊滤镜

滤镜效果可以参考Photoshop中的“滤镜”功能。

定义特效对象：

<defs>
    <filter id="f2">
        <feGaussianBlur stdDeviation="3"/>
    </filter>
</defs>

使用特效对象：

<rect filter="url(#f2)"></rect>

更多的滤镜示例查看MDN：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

第三方绘图工具
1、Two.js：一个二维的绘图 API，用于较新的 Web 浏览器，可基于不同上下文绘制，包括 svg、canvas 和 webgl。
2、Snap.svg：使用svg绘图的插件库
3、d3.js ：数据可视化插件库，使用SVG绘图 最新版的d3已经支持使用canvas绘制