滤镜
剪切
<defs>
<clipPath id="clipname">
<rect x='x' y='y' width='width' height='height' />
</clipPath>
</defs>
<circle cx='100' cy='100' r='100' clip-path='url(#clipname)' />
渐变
线性渐变
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="begin" stop-color='color_begin' />
......
<stop offset="end" stop-color='color_end' />
</linearGradient>
</defs>
径向渐变
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="begin" stop-color='color_begin' />
......
<stop offset="end" stop-color='color_end' />
</radialGradient>
</defs>
遮罩
<defs>
<mask id="mask">
<rect x='x' y='y' width='width' height='height' />
</mask>
</defs>
<circle cx='100' cy='100' r='100' clip-path='url(#mask)' />
嵌入光栅图像
<image xlink:href="URL" x="x" y="y" width="width" height="height" />
//x,y,width,height默认为0
动画
SMIL
Synchronized Multimedia Integration Language ---同步多媒体集成语言
set
<svg width="400" height="400">
<circle cx="200" cy="200" r="50" style="fill:#ff6600">
<set attributeName="r" attributeType="XML" to="80" begin="3s" />
</circle>
</svg>
animate
<svg width="400" height="400">
<circle cx="200" cy="200" r="50" style="fill:#ff6600">
<animate attributeName="r" from="50" to="80" begin="0s" dur="3s" />
</circle>
</svg>
transform会有坐标偏移
<svg>
<circle cx="200" cy="200" r="50" style="fill:#ff6600">
<animateTransform attributeName="transform" begin="0s" dur="3s"
type="scale" from="1" to="1.5"/>
</circle>
</svg>
沿着特定的Path路径运动
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" style="fill:#ff6600;">
<animateMotion path="M100 100,A120 120,-45 0 1,300 300 A120 120,45 0 1,
100 100" dur="3s" rotate="auto" />
</polygon>
</svg>
参数
- attributeName = <attributeName>
要变化的元素属性名称,可以是元素的属性,也可以是CSS属性 - attributeType = "CSS | XML | auto"
三个固定参数,表明attributeName属性值的列表 - from to by values
from : 动画的起始值
to : 指定动画的结束值
by : 动画的相对变化值 - begin end
image.png
- dui 常规时间值或者'indefinite'
image.png
image.png
动画的暂停与播放
- 暂停 svg.pauseAnimations()
- 播放 svg.unpauseAnimations()
SVG插入HTML
<embed> 将svg文件以媒体形式插入html
<embed src="me.svg" width="1024" height="768" type="image/svg+xml"
pulginspage="http://www.adobe.com/svg/viewer/install/"/>
<object> 将svg文件以媒体对象形式插入html
<object data="me.svg" width="1024" height="768" type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/"/>
<iframe> 将svg文件以网页文件形式插入html
<iframe src="me.svg" width="1024" height="768"></iframe>
<img> 将svg文件以图像文件形式插入html
嵌入SVG结构
<svg>
<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="#C7000B"/>
</svg>
xmlns要写
