浅谈svg与canvas的区别
svg同canvas差不多、是用于绘画一些相对复杂的图案跟动画效果。与canvas最大的区别除了用法外,就是图片的区别:svg制作出来的是矢量图,canvas是位图。矢量图跟位图的差别就是矢量图放大不会模糊(就是所谓的不会掉帧)。位图放大会模糊,因为是由一个一个元素组成、但是位图颜色相对比较丰富。
svg元素和其他HTML元素不同,svg是基于XML的。所以在使用时会存在于HTML元素有一定的差距。
使用方式:
1、直接元素方式使用,需要引入xmlns(命名空间):http://www.w3.org/2000/svg;才能使用。
2、可以把.svg文件当成图片路径、放入image元素中以照片的形式进行展示(背景图片同理)。
3、可以直接在iframe框架引入.svg文件
svg的使用(SVG 参考手册):
常用属性(svg特有的):
stroke:边框颜色
stroke-width:边框宽度
fill:颜色填充
常用元素:
g:一个简单的包裹元素,其属性会被子元素继承。
line: 线 (x1、x2、y1、y2);
circle: 圆 (cx、cy、r);
polyline: 折线 (point: (x1,y1,x2,y2));
polygon: 多边形 (point: (x1,y1,x2,y2))(跟折线类似,只是形状为闭合的);
animate:动画 (attributeName:'改变目标'、dur:'运动时长'、form:'开始'、to:'结束');
image: 图片(xlinkHref:路径)
path: 路径。
——d属性(下面标识符大写是绝对坐标、小写是相对坐标)
——M:起始符
——L: 目标符
——Z: 闭合符
——H:水平绘制符(负数为反方向延伸)
——V:垂直绘制符(负数为反方向延伸)
——A:弧线符(X半径,Y半径,角度,弧长(0小弧,1大弧),方向(0逆时针,1顺时针),目标点X坐标,目标点Y坐标。如图所示)