SVG滤镜及动画效果／ 2-1 剪切

svg创建剪切：擦除已经创建的元素的部分内容。

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
        <clipPath id="cut-off-bottom"> 
            <rect x="0" y="0" width="200" height="100" /> 
        </clipPath> 
    </defs> 
    <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> 
</svg>

svg剪切的意思就是把剪切的部分留下来，其他的没有了。

SVG滤镜及动画效果／ 2-2 渐变

渐变：

有两种类型的渐变：线性渐变和径向渐变。(道理和css3中渐变类似)

定义渐变：

必须给渐变内容指定一个id属性，以供元素调用。为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。

调用渐变：

线性渐变：沿着直线改变颜色。

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">

　　<defs>

　　　　<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">

　　　　　　<stop offset="0%" stop-color="yellow" />

　　　　　　<stop offset="100%" stop-color="red" />

　　　　</linearGradient>

　　</defs>

　　<ellipse cx="200" cy="100" rx="100" ry="50" fill="url(#gradient)" />

</svg>

设置属性：x1="" y1="" x2="" y2="" 分别表示开始点和结束点，里面全部用百分比。

设置渐变<stop offset="百分比" stop-color="color"></stop> 为同一个节点设置两个颜色，将会直接分离两个颜色，没有渐变效果。

径向渐变：

<radialGradient>从一个点开始发散绘制渐变。

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">

　　<defs>

　　　　<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

　　　　　　<stop offset="0%" stop-color="yellow" />

　　　　　　<stop offset="100%" stop-color="red" />

　　　　</radialGradient>

　　</defs>

　　<ellipse cx="200" cy="100" rx="100" ry="50" fill="url(#gradient)" />

</svg>

1.在defs标签下定义一个带id的radialGradient,

2.设置属性：cx="" cy="" r="" fx="" fy=""前面两个表示渐变而产生的一个外圆的圆心，中间表示扩展半径，fx和fy表示渐变的中心点最后两个属性表示渐变内圆心起始点。

3.设置渐变<stop offset="百分比" stop-color="color"></stop>

4.需要渐变的图形设置fill="url(#id)"

SVG滤镜及动画效果／ 2-4 遮罩效果

遮罩效果：（被遮住但还存在） masking使用透明和灰度值遮罩计算得的软边缘。

遮罩效果可以渐变，但是剪切不行。

语法参照下图

SVG滤镜及动画效果／ 2-5 嵌入光栅图像

嵌入位图，光栅图像。。

　　<image>允许在一个svg对象内部呈现光栅图像。

　特别说明：

　　如果没有设置x或y属性，它们自动被设置为0；

　　如果没有设置height或width属性，他们自动被设置为0；

　　width或height等于0，将不会呈现这个图像。

SVG滤镜及动画效果／ 3-2 animate

SMIL： synchronized Multimedia Integration Language——同步多媒体集成语言。

xml语言中的一种。

xml语言中没有严格规范标签是单标签还是标签对。当里面要放东西，可以写成标签对，不放东西可以写成单标签。单标签必须写/号

svg动画：

<set>

在特定事件后修改某个属性值。

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">

　　<circle cx="200" cy="200" r="50" style="fill:#ff6600" >

　　　　<set attributeName="r" attributeType="XML" to="80" begin="3s" />

　　</circle>

</svg>

attributeName属性选定改变的属性；

attributeType属性类型；

to属性设置变化后的值；

begin属性设置什么时候开始。

基础动画元素，实现单属性动画过渡效果。

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">

　　<circle cx="200" cy="200" r="50" style="fill:#ff6600">

　　　　<animate attributeName="r" from="50" to="80" begin="0s" dur="3s" />

　　</circle>

</svg>

dur属性：执行整个动画过程的时间；

from属性：从某值开始。

实现transform变换动画效果。

<svg width="400" height="400" xmlns="http://www.w3.org/2000/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>

type属性：动画变化类型，平移，缩放，旋转；也是针对坐标发生变化。必须写。

<animateMotion> 让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" />

　　</polygon>

</svg>

rotate="auto";//沿着路径移动的时候，自身也会带有旋转

组合动画：多个动画组合于一个元素，构成复杂动画。

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">

　　<circle cx="200" cy="200" r="50" style="fill:#ff6600" >

　　　　<animate attributeName="r" from="50" to="80" begin="0s" dur="3s" repeatCount="indefinite" />

　　　　<animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />

　　</circle>

</svg>

repeatCount="indefinite"//无限次重复。

SVG滤镜及动画效果／ 3-5 animate参数详解

svg animation参数详解：

attributeName=<attributeName>;

　　要变化的元素属性名称，可以是元素的属性，也可以是css属性。

attributeType="CSS | XML | auto";

　　三个固定参数，CSS | XML | auto，表明attributeName属性值的列表。优先css，如果碰到css和xml都有的属性，最好把这个参数写上。

from，to，by，values

　　from：动画的起始值。

　　to：动画的结束值。

　　by：动画的相对变化值。（不能独立存在，一定要有from）

　　values：用分号分隔的一个或多个值，可以看出是动画的多个关键值点。

　　四种组合：from to；form by；to；values；

begin，end

begin是指动画开始的时间，end指动画结束的时间；

　　begin="value1;value2"：values1s之后动画走一下，value2s时候动画在走以下；

　　offset-value：偏移值；（+1，-1）

　　synvbase-value：基于同步确定值；（+1,-1快一秒钟，慢一秒种）

　　event-value：与时间相关联的值； repeat-value：重复多少次之后执行；

　　accessKey-value：定义快捷键，按下某个按键动画开始；

　　wallclock-sync-value：真实世界的时钟时间定义；

　　indefinite：无限等待。

dur：

　　动画持续时间，常规时间值或者"indefinite",默认为indefinite，在这里时间无限相当于静止。

calcMode，keyTimes，keySplines 控制动画快慢曲线。

　　discrete：from值直接跳到to值；

　　linear：animationMotion元素以外的元素的calcMode默认值，动画从头到尾的速率都是一致的；

　　paced：通过插值让动画变化步调平稳均匀；

　　spline：插值定义贝塞尔曲线。

repeatCount，repeatDur：

　　repeatCount表示动画执行次数； repeatDur定义重复动画的总时间。

fill：

　　表示动画间隙的填充方式；

　　remove：默认值，动画结束直接回到开始的地方；

　　freeze：动画结束后保持动画结束之后的状态。

accumulate="sum";

　　连接动画。默认值为none；动画结束时候的位置作为下次动画的起始位置。

additive="sum";

　　同时执行多个动画，第一个动画可以不写，后面的动画都要写。

w3c正在减少这些参数，并更提倡用css方式来写

动画的暂停：

　　svg.pauseAnimations();

播放：

　　svg.unpauseAninmations();

svg中的动画中的transform的rotate中的from和to两个属性中的值：

　　第一个代表的是旋转的角度，第二个和第三个参数代表的是x和y的坐标。

SVG滤镜及动画效果／ 4-1 在html中引入svg

使用svg文件：

1，<embed>

　　使用embed标签，将svg文件以媒体形式插入html。

　　从语法上来说，是引入了svg文件，从审查元素来看，是将整个svg的结构嵌套到html中。

2，<object>

　　使用object标签，将svg文件以媒体对象形式插入html。

　　和embed的使用同理。

3，<iframe>;

　　像是网页里嵌套网页

4，<img src="">

　　将svg文件以图形图像文件形式插入html。最好的方式。

SVG滤镜及动画效果  ／ 4-2 嵌入SVG结构

嵌入svg结构：

　　使用svg标签直接将svg代码插入到html中。

　　xmlns属性不能省略