SVG阴影滤镜

<defs> 和 <filter>

所有的SVG滤镜元素都需要定义在 <defs> 标记内。这个 <defs> 标记是 definitions 这个单词的缩写，可以包含很多种其它标签，包括各种滤镜。

<filter> 标记用来定义SVG滤镜。 <filter> 标记需要一个id属性，它是这个滤镜的标志。SVG图形使用这个id来引用滤镜。

SVG <feOffset>

例 1

<feOffset>标记可以用来让图像产生阴影效果。这个效果的原理很简单，就是让SVG图像的副本沿着x、y轴移动一点。

下面的第一个例子，我们先偏移图像的副本(使用<feOffset>)，然后进行图像合并(使用<feBlend>)：

上面的图像使用了下面的SVG代码：

<svg height="120" width="120">

  <defs>

    <filter id="f1" x="0" y="0" width="200%" height="200%">

      <feOffset result="offOut" in="SourceGraphic" dx="20" 
dy="20" />

      <feBlend in="SourceGraphic" in2="offOut" 
mode="normal" />

    </filter>

  </defs>

  <rect width="90" height="90" stroke="green" stroke-width="3"

  fill="yellow" filter="url(#f1)" />

</svg>

代码说明：

• <filter>标记里的id属性定义了这个滤镜的唯一标志
• <rect>标记里的filter属性定义了需要引用的滤镜是“f1”

例 2

下面，我们将偏移的图形副本进行模糊处理(使用 <feGaussianBlur>)：

上面的图像使用了下面的SVG代码：

<svg height="140" width="140">

  <defs>

    <filter id="f2" x="0" y="0" width="200%" height="200%">

      <feOffset result="offOut" in="SourceGraphic" dx="20" 
dy="20" />

      <feGaussianBlur result="blurOut" in="offOut" 
stdDeviation="10" />

      <feBlend in="SourceGraphic" in2="blurOut" 
mode="normal" />

    </filter>

  </defs>

  <rect width="90" height="90" stroke="green" stroke-width="3"

  fill="yellow" filter="url(#f2)" />

</svg>

代码说明：

• <feGaussianBlur>标记里的stdDeviation属性定义了模糊的程度

例三 3

下面，我将实现一个黑色的阴影效果：

上面的图像使用了下面的SVG代码：

<svg height="140" width="140">

  <defs>

    <filter id="f3" x="0" y="0" width="200%" height="200%">

      <feOffset result="offOut" in="SourceAlpha" dx="20" 
dy="20" />

      <feGaussianBlur result="blurOut" in="offOut" 
stdDeviation="10" />

      <feBlend in="SourceGraphic" in2="blurOut" 
mode="normal" />

    </filter>

  </defs>

  <rect width="90" height="90" stroke="green" stroke-width="3"

  fill="yellow" filter="url(#f3)" />

</svg>

代码说明：

• <feOffset>标记里的in属性的值现在使用的是"SourceAlpha"，意思是使用图片的Alpha通道进行模糊，而不是完整的RGBA图像

例 4

现在，我们使用颜色来实现阴影效果：

上面的图像使用了下面的SVG代码：

<svg height="140" width="140">

  <defs>

    <filter id="f4" x="0" y="0" width="200%" height="200%">

      <feOffset result="offOut" in="SourceGraphic" dx="20" 
dy="20" />

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

      <feBlend in="SourceGraphic" in2="blurOut" 
mode="normal" />

    </filter>

  </defs>

  <rect width="90" height="90" stroke="green" stroke-width="3"

  fill="yellow" filter="url(#f4)" />

</svg>

代码说明：

• <feColorMatrix>滤镜的作用是用来将偏移后的副本图像颜色变成接近于黑色。在颜色矩阵中有三个‘0.2’，它们将会分别和红、绿、蓝三个通道的值相乘，得出新的颜色。新颜色将会很接近黑色(黑色值是0)