【面向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绘制