SVG阴影、动画

一svg阴影

1.1 <defs>

SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在 <defs> 元素里面。这样做可以增加 SVG 内容的易读性和无障碍。在 <defs> 元素中定义的图形元素不会直接呈现。可以在视图的任意地方利用 <use> 元素呈现这些元素。

<svg width="80px" height="30px" viewBox="0 0 80 30" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)"  />
</svg>

1.2<filter>

<filter> 元素作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标 SVG 元素上的 filter 属性引用一个滤镜。

<svg width="500" height="100">
    <defs>
        <filter id="blurFilter" y="-5" height="40">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3"></feGaussianBlur>
        </filter>
    </defs>
    <ellipse cx="155" cy="60" rx="25" ry="15" stroke="none" fill="blue" filter="url(#blurFilter)"></ellipse>
</svg>

 1.3 <feoffset>和<feblend>

<feOffset> 将输入图像作为一个整体，通过属性 dx 和属性 dy 的值指定一个偏移量。

<feBlend> 滤镜把两个对象组合在一起，使它们受特定的混合模式控制。类似于图像编辑软件中混合两个图层。

将 <feOffset> 和 <feBlend> 结合在一起，即可创建图形的阴影效果。

<svg>
    <defs>
        <filter id="filter-offset" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
            <feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
        </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-offset)"></rect>
</svg>

1.4<feGaussianBlur>

<feGaussianBlur> 滤镜可以对输入图像进行高斯模糊，并通过属性 stdDeviation 指定偏移的像素数量。

<svg>
    <defs>
        <filter id="filter-blur" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur>
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
        </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-blur)"></rect>
</svg>

1.5 <feColorMatrix>

<feColorMatrix> 滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值（一个表示为 [红，绿，蓝，透明度] 的矢量）都经过矩阵乘法计算出新的颜色。

<svg>
    <defs>
        <filter id="filter-matrix" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
            <feColorMatrix result="matrixOut" in="offOut" type="matrix" 
                values="0.2 0 0 0 0
                        0 0.2 0 0 0
                        0 0    0.2 0 0
                        0 0 0 1 0" />
            <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10"></feGaussianBlur>
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
        </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-matrix)"></rect>
</svg>

二svg渐变

2.1线性渐变 <linearGradient>

用来定义线性渐变，用于图形元素的填充或描边。

参数说明：

参数	说明
x1	渐变开始的 x 轴位置。
x2	渐变结束的 x 轴位置。
y1	渐变开始的 y 轴位置。
y2	渐变结束的 y 轴位置。

参数	说明
offset	定义渐变开始/停止时的位置。
stop-color	定义渐变开始/停止时使用的颜色。
stop-opacity	定义渐变开始/停止时指定颜色的不透明度。

<svg>
    <defs>
        <linearGradient id="line-hor" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="yellow" stop-opacity="1" />
            <stop offset="100%" stop-color="red" stop-opacity="1" />
        </linearGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#line-hor)"></ellipse>
</svg> 

2.2svg径向渐变 

<radialGradient> 元素用来定义径向渐变，以对图形元素进行填充或描边。

参数	说明
cx	定义一个中心点的 x 轴坐标。
cy	定义一个中心点的 y 轴坐标。
r	定义圆的半径。
fx	定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
fy	定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
fr	定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。

<svg>
    <defs>
        <radialGradient id="radial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" stop-color="white" stop-opacity="0" />
            <stop offset="100%" stop-color="blue" stop-opacity="1" />
        </radialGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#radial)"></ellipse>
</svg>

三svg动画

SVG 中提供三种常用动画标记：

标记	说明
<animate>	动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时间点改变。在指定持续时间里，属性从开始值变成结束值。
<animateTransform>	变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。
<animateMotion>	定义了一个元素如何沿着运动路径进行移动。

3.1动画常用属性

属性	作用	值
attributeName	标识了在一个动画动作环节中，父元素需要被改变的属性名。
from	svg 动画发生过程中被修改的属性的初始值。
to	svg 动画发生过程中被修改的属性的最终值。
dur	标识了动画的简单持续时间。
fill	在动画结束后，是否还要保持该动画。	remove：在动画的激活持续时间结束后，动画效果会移除。这是默认值。 freeze：在动画的激活持续时间结束后，动画效果会“冻结”着，直到文档持续时间结束或动画重新开始。
repeatCount	动画重复执行次数。
repeatDur	动画重复执行总时长。
begin	规定动画开始的时间。	1s：1s 后开始执行动画。 click：click 触发事件执行后再执行动画。 click + 2s：click 触发事件执行后，等两秒再执行动画。
restart	规定元素开始动画后，是否可以被重新开始执行。	always：动画可以在任何时候被重置。这是默认值。 whenNotActive：只有在动画没有被激活的时候才能被重置，例如在动画结束之后才能再执行。 never：在整个 SVG 执行的过程中，元素动画不能被重置。
calcMode	规定每一个动画片段的动画表现。	linear：匀速动画，这是默认值。 discrete：非连续动画，没有动画效果瞬间完成。 paced：规定整个动画效果始终以相同的速度进行，设置 keyTimes 属性无效。 spline：配合 keySplines 属性来定义各个动画过渡效，自定义动画。
keyTimes	划分动画时间片段。	0~1。
values	划分对应取值片段的值。

3.2 <animate>

<animate> 实现一个点击触发无限往返效果。

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="blue">
        <animate id="toRight" 
                attributeName="cx" 
                from="100" 
                to="300" 
                dur="1s" 
                begin="click;toLeft.end" />
        <animate id="toLeft" 
                attributeName="cx" 
                from="300" 
                to="100" 
                dur="1s" 
                begin="toRight.end" />
    </circle>
</svg>

3.3 <animateTransform>

<animateTransform> 实现一个点击触发水平移动效果。

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="blue">
        <animateTransform 
                attributeName="transform" 
                type="translate" 
                from="0 0" 
                to="200 0" 
                dur="2s" 
                begin="click" 
                fill="freeze" />
    </circle>
</svg>

  <animateTransform> 实现一个点击触发图形旋转效果。

<svg width="500" height="500">
  <rect x="100" y="100" width="200" height="100" fill="blue">
    <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 100 100"
        to="45 100 100"
        dur="1s"
        begin="click"
        fill="freeze" />
  </rect>
</svg>

 3.4<animateMotion>

实现一个点击触发矩形块沿路径移动的效果。

<svg width="500" height="500" viewBox="-100 -100 500 500">
    <path 
            d="M0 0 C0 300 300 300 300 0" 
            stroke="red" 
            stroke-width="2" 
            fill="none" />
    <rect x="0" y="0" width="40" height="40" fill="lightgreen">
        <animateMotion 
                path="M0 0 C0 300 300 300 300 0" 
                dur="3s" 
                begin="click" 
                fill="freeze" 
                rotate="auto" />
    </rect>
</svg>

<path> 元素是用来定义形状的通用元素。所有的基本形状都可以用 <path> 元素来创建。

M0 0 是指移动到 0 0 的坐标位置，M 是 “Move to” 的意思。

C0 300 300 300 300 0 是指贝塞尔曲线，0 300 是起点坐标，300 300 是中间点坐标，300 0 是终点坐标。