19. SVG滤镜使用入门

SVG滤镜使用入门

什么是SVG滤镜？

SVG滤镜（Scalable Vector Graphics Filters）是一种基于XML的图形定义语言，用于描述二维矢量和混合矢量/光栅图形。在SVG中，滤镜是一种强大的工具，它能够对图形元素、文本和图片等进行视觉效果的处理，比如模糊、颜色变换、阴影等。

滤镜的用法

要在SVG中使用滤镜，首先需要定义一个<filter>元素，并在其中指定各种滤镜操作。然后，通过filter属性将其应用到目标元素上。

<svg width="600" height="400">
  <!-- 定义滤镜 -->
  <defs>
    <filter id="myFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
      <!-- 在这里添加滤镜效果,具体看下面的示例 -->
    </filter>
  </defs>

  <!-- 应用滤镜到一个圆形上 -->
  <circle cx="200" cy="200" r="100" style="fill:blue;" filter="url(#myFilter)" />
</svg>

滤镜种类概括

SVG提供了多种滤镜效果，以下是一些常用的滤镜类型：

feGaussianBlur

应用高斯模糊效果。

feOffset

偏移图像，常用于创建阴影效果。

feColorMatrix

feColorMatrix滤镜通过颜色矩阵变换来调整图形元素的颜色。它可以用来创建复杂的颜色效果，如灰度、反转颜色等。

feBlend

feBlend滤镜用于将两个图像或图形元素按照指定的模式混合。它类似于Photoshop中的混合模式，如正片叠底、叠加、差值等。

feComposite

feComposite滤镜用于根据两个源图像的颜色值进行算术运算，从而创建各种图像组合效果。

feMerge

feMerge滤镜可以将多个滤镜效果合并到一起。通过feMergeNode子元素指定哪些效果需要合并。

feDisplacementMap

feDisplacementMap滤镜根据一个图像的颜色信息来扭曲另一个图像。这可以用来创建波纹或其他扭曲效果。

feTurbulence

feTurbulence滤镜用于创建不规则的纹理，如云彩或大理石纹理。它可以生成Perlin噪声，这是一种计算机图形中常用的随机纹理生成算法。

feSpecularLighting

feSpecularLighting滤镜用于在图像上添加高光效果，可以模拟光照对物体表面的影响。

每种滤镜都有其特定的属性和用法，可以通过组合使用来创建复杂的视觉效果。

示例：应用高斯模糊滤镜

以下是一个应用高斯模糊滤镜的示例，包含详细的注释内容：

<svg width="600" height="400">
  <defs>
    <filter id="blurFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
      <!-- feGaussianBlur元素用于创建模糊效果 -->
      <!-- stdDeviation属性定义了模糊的程度 -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>

  <!-- 应用高斯模糊滤镜到矩形上 -->
  <rect x="100" y="100" width="200" height="200" style="fill:red;" filter="url(#blurFilter)" />
</svg>

在这个例子中，<feGaussianBlur>元素被添加到<filter>中，stdDeviation属性设置为5，这意味着滤镜会在图形上应用中等程度的模糊效果。然后，通过filter属性将定义好的滤镜#blurFilter应用到一个红色的矩形上。

示例：滤镜组合使用

这些滤镜可以单独使用，也可以组合使用，以创造出丰富多彩的视觉效果。下面是一个使用了多种滤镜的示例代码，包含详细的注释：

<svg width="600" height="400">
  <defs>
    <!-- 定义一个滤镜组合 -->
    <filter id="complexFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
      <!-- 使用feColorMatrix创建灰度效果 -->
      <feColorMatrix in="SourceGraphic" type="matrix" values="0.33 0.33 0.33 0 0
                                                               0.33 0.33 0.33 0 0
                                                               0.33 0.33 0.33 0 0
                                                               0 0 0 1 0" />
      <!-- 使用feOffset创建阴影效果 -->
      <feOffset dx="10" dy="10" result="offsetBlur" />
      <!-- 使用feBlend将原图与阴影效果混合 -->
      <feBlend in="SourceGraphic" in2="offsetBlur" mode="normal" />
    </filter>
  </defs>

  <!-- 应用滤镜到矩形上 -->
  <rect x="50" y="50" width="200" height="200" style="fill:red;" filter="url(#complexFilter)" />
</svg>

在这个例子中，我们首先使用feColorMatrix将图像转换为灰度，然后使用feOffset创建阴影效果，最后使用feBlend将原图与阴影混合。这只是一个简单的示例，展示了如何组合不同的滤镜来创造效果。在实际应用中，你可以根据需要自由地组合这些滤镜，创造出独特的视觉效果。

result和in属性的使用

result属性

在SVG滤镜中，result和in是两个非常重要的属性，它们用于定义和引用滤镜操作的输入和输出。

result属性为滤镜操作定义了一个名称，这个名称可以被后续的滤镜操作引用。如果一个滤镜操作定义了result属性，那么它的输出可以作为另一个滤镜操作的输入。如果没有提供result值，而且如果下一个滤镜也没有提供in属性值，则输出只可作为下一个滤镜的隐式输入

in属性

in属性指定了滤镜操作的输入源。它的值可以是以下几种：

• SourceGraphic：表示整个图形元素将作为滤镜原语的原始输入。
• SourceAlpha：表示图形元素的alpha通道将作为滤镜原语的原始输入。
• BackgroundImage：表示背景图像将作为滤镜原语的输入。
• BackgroundAlpha：表示背景图像的alpha通道将作为滤镜原语的输入。
• FillPaint：表示用于填充的画笔将作为滤镜原语的输入。
• StrokePaint：表示用于描边的画笔将作为滤镜原语的输入。
• 或者是其他滤镜操作的result属性值

示例

下面是一个使用result和in属性的示例，它展示了如何创建一个阴影效果：

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义一个高斯模糊滤镜 -->
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
      <feOffset in="blur" dx="5" dy="5" result="offsetBlur"/>
      <!-- 使用feMerge合并原图和阴影效果 -->
      <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- 应用滤镜到文本上 -->
  <text x="20" y="100" style="font-size: 40px; fill: black; filter: url(#dropshadow)">
    文本阴影
  </text>
</svg>

在这个例子中，feGaussianBlur滤镜首先对源图形的alpha通道应用高斯模糊，并将结果命名为blur。然后feOffset滤镜使用blur作为输入，创建了一个偏移效果，并将结果命名为offsetBlur。最后，feMerge滤镜将offsetBlur和SourceGraphic合并，创建了阴影效果