32: SVG 滤镜在 SVG 和 HTML 元素上的应用

你可能听说过 CSS 滤镜？你可以通过 CSS 将它们应用于任何元素，例如

.apply-css-filter {
  -webkit-filter: grayscale(0.5);
  filter: grayscale(0.5);
}

你甚至可以将它们应用于 HTML 元素或 SVG 元素。

但是，你也可以在 SVG 中定义滤镜，并且这样做时有更多的选择。这是一个定义示例

<svg>
  <defs>
    <filter id="pictureFilter">
      <feMorphology operator="erode" radius="2" />
    </filter>
  </defs>
</svg>

然后，你可以直接在 SVG 中将其应用于元素，例如

<svg>
  <!-- could be anything -->
  <image filter="url(#pictureFilter)" xlink:href="image.jpg" width="100%" height="100%" x="0" y="0" />
</svg>

或者，通过 CSS 引用 ID 来应用，例如

.apply-svg-filter {
  -webkit-filter: url(#pictureFilter);
  filter: url(#pictureFilter);
}

有很多 SVG 滤镜。一些常见的，如模糊，以及一些奇怪的滤镜，例如用于绘制效果。这里有 规范。