svg学习理解

浅谈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坐标。如图所示）