SVG 过滤器简介｜老吴教程

在本教程中，我们将探索 svg 滤镜的世界。使用 SVG 过滤器，您可以创建独特的文本效果、图像效果，并且使用一点 javascript 可以创建一些非常有趣的动态分形效果。

SVG 过滤器简介第1张

在本教程中

以下是我们将介绍的内容：

什么是 SVG 过滤器？
过滤器元素和过滤器基元
应用 SVG 滤镜效果（演示）
浏览器支持

什么是 SVG 过滤器？

要了解什么是 SVG 过滤器，我们先来看看 css 过滤器。在 CSS 中，我们可以使用某些函数来添加模糊、阴影和颜色操作（例如更改色调、饱和度、亮度等）。

CSS 过滤器很棒，但它们非常有限。您实际上只能将它们广泛用于位图图像，而且您可以做的事情相当简单。如果您需要更高级的东西，则需要将注意力转向 SVG 过滤器。

注意：CSS 过滤器实际上是 SVG 过滤器的一个子集。信不信由你，SVG 过滤器从 2007 年就已经出现了！

CSS 过滤器更容易被听到，因为它们更容易实现。然而，使用 CSS 过滤器我们可以对图像应用模糊，使用 SVG 过滤器我们可以应用水平模糊，以及其他类型。

重要提示：SVG 过滤器可以应用于任何 html 元素。

过滤器元素和过滤器基元

为了创建 SVG 过滤器，我们使用filter()元素和我们称为过滤器原语的特殊功能。我们从一个开始并在<svg>其中定义一个过滤器（带有一个 ID）：

<svg>
    <filter id="demofilter">
        ...
    </filter>

    <img xlink:href="" width="100" height="100" x="0" y="0" filter="url(demoFilter)"/>
</svg>

在过滤器中，我们添加了我们需要的精确过滤器原语（稍后会详细介绍），最后我们创建我们想要影响的元素，使用filter=""属性并引用我们创建的 ID。

原语

我们今天可以使用 17 个原语：

<feGaussianBlur>
<feDropShadow>
<feMorphology>
<feDisplacementMap>
<feBlend>
<feColorMatrix>
<feConvolveMatrix>
<feComponentTransfer>
<feSpecularLighting>
<feDiffuseLighting>
<feFlood>
<feTurbulence>
<feImage>
<feTile>
<feOffset>
<feComposite>
<feMerge>

注意所有它们的fe前缀。那代表过滤效果。这些基元允许我们创建简单的效果，如投影，以及 photoshop 级效果，如颜色混合、置换贴图等。

应用 SVG 滤镜效果

从一个<svg>元素开始，给它一些尺寸（这些恰好与我将要使用的图像的尺寸相匹配）和一个视图框：

<svgwidth="1000"height="577"viewBox="0 0 1000 577">
</svg>

接下来是过滤器元素，带有一个 ID：

<svgwidth="1000"height="577"viewBox="0 0 1000 577">
<filterid="demoFilter">
</filter>
</svg>

现在我们需要添加一个可以应用过滤器的元素。

<svg width="1000" height="577" viewBox="0 0 1000 577">
    <filter id="demoFilter">

    </filter>

    <image xlink:href="https://s3-us-west-2.amazonaws. com/s.cdpn.io/17119/redcharlie-k2zWqv_yfNM-unsplash.jpg" width="100%" height="100%" x="0" y="0" filter="url(#demoFilter)"/>
</svg>