svg嵌套svg_SVG过滤器简介

svg嵌套svg

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

视频：SVG过滤器

在本教程中

这是我们要介绍的内容：

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

什么是SVG过滤器？

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>元素开始，为其提供一些尺寸（这些尺寸恰好与我要使用的图像的尺寸匹配）和一个视图框：

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

接下来，是具有ID的过滤器元素：

<svg width="1000" height="577" viewBox="0 0 1000 577">
    <filter id="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>

原语

然后在我们的<filter>内部放置一些过滤器原语。 我想先添加一个滤色镜，然后再应用混合模式滤镜。 因此，第一个使用feFlood原语：

<feFlood flood-color="#2da0fb" flood-opacity="1" result="FLOOD"/>

在这里，我们定义了颜色，不透明度和结果（我们将其定义为FLOOD）。 结果如何？ 可以合并SVG过滤器，因此我们可以使用在此定义的ID作为另一个原语的条目。 现在，我们将添加第二个原语：

<feBlend mode="color-burn" in="SourceGraphic" in2="FLOOD" result="BLEND"/>

此feBlend使我们可以定义混合模式，然后定义两个输入。 我们的输入是SourceGraphic （这是我们要对其全部应用的元素）和FLOOD （这是我们定义的第一个原语）。

注意 ：此示例中的大写字母不是强制性的，但是我希望能够在工作时直观地区分这些值。

这就是我们最终的结果（分叉并在自己周围玩！）：

有关更多示例，请观看上面的视频。 在其中，我们创建以下内容：

结论

这里的所有都是它的！ SVG过滤器功能非常强大，因此请牢牢抓住并玩转。 您会惊讶于您能创造什么。

在浏览器支持方面，您可能会惊讶地发现SVG过滤器实际上比CSS过滤器受到更好的支持！ 请注意：尽管不同的浏览器可能支持SVG过滤器功能，但它们呈现最终结果的方式可能有所不同。

翻译自: https://webdesign.tutsplus.com/tutorials/introduction-to-svg-filters--cms-33546

svg嵌套svg