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绘制