简单理解svg

• Canvas 是H5新出来的标签,是画布.利用JavaScript在网页绘制图像.Canvas是逐像素进行渲染的,色彩丰富,缩放失真.
• 修改图形 需要重绘整个画布

• 可缩放的矢量图形(缩放之后不会失真的图片格式 Scalable Vector Graphics)
• svg是通过DOM操作来显示的,svg中每个图形都是单独的节点,方便修改样式.

version:svg 遵循的规范的版本号 1.0 1.1两个版本
xmlns:定义svg命名规范.
x y表示开始坐标 width和height表示矩形的宽度和高度 没有设置填充颜色之前 默认是黑色 fill设置填充颜色

M:moveTo 移动到某个坐标点
L:lineTo:画线到某个坐标点
Z:close闭合
stork:线的颜色
stork-width:线的宽度

   
 // 大写是绝对定位 小写是相对定位 相对上一个坐标
   

圆
cx和cy定义的是圆心的x y坐标 r代表半径

参数分别代表开始坐标 最大半径和最小半径 旋转角度 大小角弧线(1,0) 顺逆时针(1,0) 结束的坐标 x y

id是渐变色唯一的名称 x1 y1 x2 y2设置的渐变的方向

 
            
              
              
              
                 
            
        
        // fill设置填充颜色 id是渐变色的名称
        

svg动画由于某些场景不能用,只需要简单了解即可.
跟css动画很像
attriName:变形
type:选择动画操作方式 这里是旋转
form:从哪里开始
to:从哪里结束
dur:动画执行时间
repeatCount:动画重复次数

  
            吃饭 睡觉 
            

        

定义一个路线 path id作为文字执行路线的名称 根据id选择文字根据哪条路线样式

        
            
            
        
        
            
                陶大花 胖琳 可真是个可人啊一群老六