滤镜

剪切

<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

![](me.svg)

嵌入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要写