greenteaObject

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