svg阴影 svg渐变 svg动画

1.svg阴影
1.1<defs>
SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在 <defs>; 元素里面。这样做可以增加 SVG 内容的易读性和无障碍。在<defs>; 元素中定义的图形元素不会直接呈现。可以在视图的任意地方利用 <use>; 元素呈现这些元素。
eg:
<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 元素上的 `filter` 属性引用一个滤镜。
eg:
<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>; 结合在一起，即可创建图形的阴影效果。
eg:
<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>
&