2022/07/16

SVG 滤镜

SVG 已有十几年的发展历史，具有丰富的滤镜工具且可处理复杂的视觉效果。

创建 SVG 滤镜

创建 SVG 滤镜有两种方式可选，一种是直接在 SVG 中通过 <filter> 标签来定义然后在元素中通过 filter 属性进行引用，另一种是在 CSS 中对 HTML 元素进行引用，两种方式产生的结果都完全一致。

使用 <filter> 标签定义

<svg width="600" height="450" viewBox="0 0 600 450">
  <filter id="myFilter">
    <!-- filter effects -->
  </filter>
  <image xlink:href="..." width="100%" height="100%" x="0" y="0" filter="url(#myFilter)"></image>   
</svg>

定义的 filter 不会直接被浏览器渲染，只会在元素上使用了该滤镜才会被渲染。

在 HTML 元素中

// 在 .el 元素中使用一个名为 #myAwesomeEffect 的 SVG 滤镜
.el {
   filter: url(#myAwesomeEffect);
}

示例

<svg width="800" height="600" viewBox="0 0 800 600">
  <filter id="blurMe">
    <feGaussianBlur stdDeviation="5"/>
  </filter>
  <image xlink:href="./avatar.png" width="100%" height="100%" x="0" y="0" filter="url(#blurMe)"></image>   
</svg>

滤镜基元中的 in , in2 , result , operator 属性

<svg width="600" height="400" viewBox="0 0 850 650">
  <filter id="filter">
    <feOffset in="SourceAlpha" dx="20" dy="20"></feOffset>

    <feGaussianBlur stdDeviation="10" result="DROP"></feGaussianBlur>

    <feFlood flood-color="#000" result="COLOR"></feFlood>

    <feComposite in="DROP" in2="COLOR" operator="in" result="SHADOW1"></feComposite>

    <feComponentTransfer in="SHADOW1" result="SHADOW">
      <feFuncA type="table" tableValues="0 0.5"></feFuncA>
    </feComponentTransfer>

    <feMerge>
      <feMergeNode in="SHADOW"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
  <image xlink:href="./avatar.png" x="0" y="0" width="100%" height="100%" filter="url(#filter)"></image>
</svg>