SVG-滤镜与动画

滤镜

剪切


    
         
    


渐变

线性渐变

    
        
        ......
        
    

径向渐变

    
        
        ......
        
    

遮罩


    
         
    


嵌入光栅图像


//x,y,width,height默认为0

动画

SMIL

Synchronized Multimedia Integration Language ---同步多媒体集成语言

set

    
        
    

animate

    
        
    

transform会有坐标偏移


    
        
    

沿着特定的Path路径运动


    
        
    

参数
  • attributeName =
    要变化的元素属性名称,可以是元素的属性,也可以是CSS属性
  • attributeType = "CSS | XML | auto"
    三个固定参数,表明attributeName属性值的列表
  • from to by values
    from : 动画的起始值
    to : 指定动画的结束值
    by : 动画的相对变化值
  • begin end
SVG-滤镜与动画_第1张图片
image.png
  • dui 常规时间值或者'indefinite'
SVG-滤镜与动画_第2张图片
image.png
SVG-滤镜与动画_第3张图片
image.png
动画的暂停与播放
  • 暂停 svg.pauseAnimations()
  • 播放 svg.unpauseAnimations()

SVG插入HTML

将svg文件以媒体形式插入html


将svg文件以媒体对象形式插入html


 
 

将svg文件以图像文件形式插入html

![](me.svg)

嵌入SVG结构


    

xmlns要写

你可能感兴趣的:(SVG-滤镜与动画)