此页面 即将完成

注意： WebPlatform 项目在 2012 年至 2015 年间由多个维护者支持，现已停止维护。该网站现在可在 github 上找到。

filter

摘要

SVG 滤镜效果将模糊和颜色变换等图形操作应用于源图形。滤镜可以应用于图形 SVG 元素（<circle>、<text>）以及分组元素（<g>）。滤镜元素指定滤镜效果的位置、尺寸、分辨率和单位。滤镜元素通常具有多个子元素（滤镜原语），它们组合在一起以创建最终的图形效果。

Overview Table

DOM Interface
SVGFilterElement

SVG 滤镜将图形效果应用于 SVG 元素。在 SVG 1.1 中，可用的图形效果范围包括模糊、卷积、颜色曲线操作、跨通道颜色效果、侵蚀效果、混合、合成等。filter 元素声明滤镜效果，通常包含在 SVG XML 文档的 defs 部分或 HTML5 文档中的内联 SVG 元素中。滤镜元素包含一组子元素，这些子元素指定构成该滤镜操作的各个图形操作或“滤镜原语”。滤镜效果通过添加设置为所需滤镜元素 ID 的 filter 属性来应用于 SVG 元素。

下面是一个基本的 SVG 滤镜示例，它显示了应用于 SVG 矩形元素的 Gaussian 模糊。在此示例中，我们首先声明一个 ID 为“gblur”的滤镜。在此滤镜元素内，我们声明一个标准差为 5 的滤镜原语（feGausssianBlur）。关闭标签后，我们使用 SVG rect 元素绘制一个矩形。我们通过添加引用其 ID gblur 的滤镜属性来将滤镜应用于该元素。

<svg width="200px" height="200px" viewbox="0 0 200 200" xmlns="https://w3org.cn/2000/svg" version="1.1">
<title>A basic filter example</title>
   <defs>
     <filter id="gblur">
        <feGaussianBlur stdDeviation="5"/>
     </filter>
   </defs>
<rect x="25" y="50" width="100" height="100" fill="blue" stroke="red"/>
<rect x="175" y="50" width="100" height="100" fill="blue" stroke="red" filter="url(#gblur)"/>
</svg>​​​​​​​​​​​

image showing input and output of a blur filter effect

滤镜区域

filter 元素可以选择性地定义滤镜效果输出的位置、尺寸、分辨率和单位。可以使用以下参数指定滤镜的位置和尺寸：x、y、width、height。默认值*并非直观*，它们是

  • x: -10%
  • y: -10%
  • width: 120%
  • height: 120%

这种效果是，默认情况下，滤镜的输出会在相对于输入元素周围 10% 的溢出量上绘制到屏幕上。在某些情况下（例如模糊效果），这可能是可取的。在其他情况下，例如光照效果，这可能是不可取的，并且应显式指定滤镜区域。下面的示例显示了将 x 和 y 设置为 50% 的滤镜效果区域的效果：滤镜效果区域有效地剪切输出。

<svg width="200px" height="200px" viewbox="0 0 200 200 xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>An example of a clipped filter region</title>
   <defs>
     <filter id="gblurclipped" x="50%" y="50%" width="60%" height="60%">
        <feGaussianBlur stdDeviation="5"/>
     </filter>
   </defs>
<rect x="25" y="50" width="100" height="100" fill="blue" stroke="red"/>
<rect x="175" y="50" width="100" height="100" fill="blue" stroke="red" filter="url(#gblurclipped)"/>
</svg>​​​​​​​​​​​

image showing the result of specifying a custom filter effects region

滤镜分辨率

默认情况下，浏览器决定在对滤镜输入执行操作时使用什么分辨率，但可以通过显式设置 filterRes 属性来设置此分辨率。选择远低于显示默认值的滤镜分辨率会导致可见的像素化，但滤镜将执行得更快。选择远高于默认值的滤镜分辨率会导致滤镜性能变慢。滤镜分辨率可以分别在 X 和 Y 维度上单独指定。

下面我们展示了低 filterRes 值模糊的示例。第一个示例显示了一个应用于 X 和 Y 维度的单个低 filterRes 值。第二个示例显示了一个具有两个值的 filterRes：X 维度的高值和 Y 维度的低值，这会导致仅在 Y 维度上出现低分辨率模糊。设置非常低的分辨率会导致可见的像素化。

<svg width="450px" height="300px" viewbox="0 0 450 300" xmlns="https://w3org.cn/2000/svg" version="1.1">
   <title>Example showing filterRes</title>
      <defs>
        <filter id="lowresblur" filterRes="25" x="-50%" y="-50%" width="200%" height="200%">
           <feGaussianBlur stdDeviation="5"/>
       </filter>
        <filter id="lowresblurY" filterRes="425 25" x="-50%" y="-50%" width="200%" height="200%">
           <feGaussianBlur stdDeviation="5"/>
        </filter>
      </defs>
<rect x="25" y="50" width="100" height="100" fill="blue" stroke="red"/>
<rect x="175" y="50" width="100" height="100" fill="blue" stroke="red" filter="url(#lowresblur)"/>
<rect x="325" y="50" width="100" height="100" fill="blue" stroke="red" filter="url(#lowresblurY)"/>
</svg>​

image showing the result of specifying a custom filter effects region

滤镜效果的单位和坐标

filterUnits

默认情况下，滤镜元素的滤镜效果区域（x、y、width、height）的单位和坐标系统设置为相对于引用滤镜的元素的边界框。在 SVG 术语中，这称为“objectBoundingBox”。当我们编写 x="50%" 时，这意味着“将滤镜区域的起始 x 位置设置为引用元素的边界框的左侧 + 元素宽度的 50%”。

但是，您也可以通过设置 filterUnits 属性来显式指定单位和坐标。两种替代方案是“objectBoundingBox”（我们刚刚描述的默认方案）或“userSpaceOnUse”。userSpaceOnUse 将滤镜单位和坐标系统设置为引用元素的画布，或者在 SVG 术语中，即“userSpaceOnUse”。

primitiveUnits

除了滤镜本身的单位系统之外，您还可以指定滤镜的子滤镜原语将使用的单位系统。同样，选择是 userSpaceOnUse 和 objectBoundingBox。它们以与 filterUnits 相同的方式影响 0,0 坐标和滤镜原语的单位值。

在下面的示例中，我们将滤镜和滤镜原语的单位系统设置为 userSpaceOnUse 和 objectBoundingBox 的四种可能组合，同时实现相同的滤镜效果。在这里，我们使用 <feFlood> 原语生成一个矩形颜色字段，该字段相对于其引用元素偏移。然后我们使用 <feMerge> 将 feFlood 与原始元素（SourceGraphic）组合。

<svg width="600px" height="300px" viewbox="0 0 600 300" xmlns="https://w3org.cn/2000/svg" version="1.1">
<title>A basic filter example</title>
   <defs>
     <filter filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" id="BoxBox" x="0%" y="0%" width="100%" height="100%">
        <feFlood x="20%" y="20%" width="50%" height="50%" flood-color="green" result="greenbox"/>
        <feMerge>
            <feMergeNode in="SourceGraphic"/>
            <feMergeNode in="greenbox"/>
         </feMerge>
     </filter>
     <filter filterUnits="userSpaceOnUse" primitiveUnits="objectBoundingBox" id="UserBox" x="175" y="50" width="120" height="120">
        <feFlood x="20%" y="20%" width="50%" height="50%" flood-color="green" result="greenbox"/>
        <feMerge>
            <feMergeNode in="SourceGraphic"/>
            <feMergeNode in="greenbox"/>
         </feMerge>
     </filter>
     <filter filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" id="BoxUser" x="0%" y="0%" width="100%" height="100%">
        <feFlood x="349" y="74" width="60" height="60" flood-color="green" result="greenbox"/>
        <feMerge>
            <feMergeNode in="SourceGraphic"/>
            <feMergeNode in="greenbox"/>
         </feMerge>
     </filter>
     <filter filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" id="UserUser" x="475" y="50" width="120" height="120">
        <feFlood x="499" y="74" width="60" height="60" flood-color="green" result="greenbox"/>
        <feMerge>
            <feMergeNode in="SourceGraphic"/>
            <feMergeNode in="greenbox"/>
         </feMerge>
     </filter>
   </defs>
<rect x="25" y="50" width="120" height="120" fill="blue" stroke="red" filter="url(#BoxBox)"/>
<rect x="175" y="50" width="120" height="120" fill="red" stroke="blue" filter="url(#UserBox)"/>
<rect x="325" y="50" width="120" height="120" fill="grey" stroke="black" filter="url(#BoxUser)"/>
<rect x="475" y="50" width="120" height="120" fill="black" stroke="purple" filter="url(#UserUser)"/>
</svg>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

请注意，当使用 userSpaceOnUse 时，我们计算滤镜和 feFlood 坐标相对于 <rect> 绘制的 user space 的 (0,0)，使用 viewbox 单位。

image showing four identical filters with different unit systems for filterUnits and primitiveUnits

示例

基本滤镜效果示例



<svg width="200px" height="200px" viewbox="0 0 200 200" xmlns="https://w3org.cn/2000/svg" version="1.1">
<title>A basic filter example</title>
   <defs>
     <filter id="gblur">
        <feGaussianBlur stdDeviation="5"/>
     </filter>
   </defs>
<rect x="50" y="50" width="100" height="100" fill="blue" stroke="red" filter="url(#gblur)"/>
</svg>​​​​​​​​​​​
[查看实时示例](http://jsfiddle.net/jsfmullany/djQ9A/)

用法

 Within the enclosing filter element, a filter effect is defined by taking inputs, applying transformation operations and feeding the results of those transformations into further operations. Advanced filters typically can contain 5or more individual filter primitives in an input/output chain. Filters are also capable of inheriting from other filters via the xlink:href attribute, however, this is not widely supported in current browsers (Dec 2012).

大多数滤镜属性可以通过 <animate> 元素进行动画处理（在 2012 年 11 月的浏览器中可用，IE 除外）。随着 GPU 加速滤镜的日益普及，许多浏览器的性能现在可以接受。

滤镜元素的子元素 - 滤镜原语 - 具有两个可选属性，用于指定颜色插值计算执行的颜色空间：color-interpolation 和 color-interpolation-filters。前者默认为 sRGB，后者默认为 linearRGB。通过 feColorMatrix 或 feComponentTransfer 进行颜色空间反转的操作可能会导致“非直观”的结果。例如，在线性 RGB 中反转灰度图像的颜色会导致向更白色的色调明显偏移。可以通过将原语的值设置为 sRGB 来更正此问题。这些属性可以设置为各个滤镜原语，也可以从滤镜元素本身继承。

如果未指定其他输入，但需要输入，则滤镜中的第一个滤镜原语将采用引用元素的栅格化（位图）版本作为其输入。后续期望输入的滤镜原语将采用紧邻的滤镜原语的结果作为输入。

在复杂的滤镜中，如果输入和输出未明确声明，则跟踪（和调试）它们可能会变得困难；为每个原语显式声明输入和输出是良好的做法。

SVG 滤镜原语可以通俗地分为输入、变换、光照效果和组合。

输入

  • feFlood：生成颜色字段
  • feTurbulence：生成各种噪声效果
  • feImage：从外部图像引用（或对象引用）生成图像，但当前浏览器（2012 年 12 月）对此支持有限

变换

  • feColorMatrix：将 RBGA 像素的输入值转换为输出值
  • feComponentTransfer：调整单个颜色通道的颜色曲线
  • feConvolveMatrix：用相对于当前像素的区域中的像素值计算出的新像素替换每个像素）
  • feGaussianBlur：用像素周围区域中像素的加权平均值替换当前像素
  • feDisplacementMap：根据另一个输入图形的 R、G 或 B 值从其当前位置移动每个像素。
  • feMorphology：用从该像素周围矩形区域中所有像素的最大值或最小值计算出的新像素替换每个像素。
  • feOffset：将输入从其当前位置移动

光照效果

  • feSpecularLighting：提供“闪亮”的 2D 或伪 3D 光照效果
  • feDiffuseLighting：提供“哑光”的 2D 或伪 3D 光照效果
  • feDistantLight：为镜面或漫反射光照提供远距离光源
  • feSpotLight：为镜面或漫反射光照提供锥形光源
  • fePointLight：为镜面或漫反射光照提供点光源

组合

  • feMerge：从多个输入（包括先前的滤镜输入）创建简单的 over 合成
  • feBlend：使用混合规则混合多个输入
  • feComposite：使用设置的组合规则组合多个输入，并考虑 alpha 值。
  • feTile：平铺输入以创建重复的图案

备注

备注

虽然 SVG 是一种矢量图形技术，但重要的是要强调 SVG 滤镜对所有输入（包括 SVG 形状）执行*像素级别*操作，并以指定的解析度生成栅格化（位图）输出。例如，在经过滤镜处理的普通 SVG 曲线应用 10 倍缩放变换时，如果原始图形的反锯齿已被滤镜转换为像素并放大，则会产生像素化的边缘。（尚不清楚这是否符合规范，或者只是当前实现的限制）

请记住，在编写滤镜时，SVG 是 XML，因此必须关闭所有标签，并且许多属性和属性需要显式指定，否则滤镜将无法执行。

滤镜元素本身不会被渲染。它仅通过应用于滤镜的元素的 filter 属性进行引用。请注意，display 属性不适用于 filter 元素，即使将 display 属性设置为“none”以外的值，元素也不会直接渲染。相反，即使 filter 元素或其任何祖先的 display 属性设置为“none”，filter 元素也可用于引用。

可以通过 CSS 滤镜 引用 SVG 滤镜，但截至 2013 年 11 月，此机制仅支持原始滤镜的子集。

语法

标准信息

成员

方法

SVGFilterElement 对象具有以下方法。

属性

SVGFilterElement 对象具有以下属性。

  • className：获取分配给此对象的类名。
  • externalResourcesRequired：获取一个值，指示正确渲染给定元素是否需要当前文档中未引用的资源。
  • filter：filter 属性通常用于将先前定义的 filter 应用于适用的元素。
  • filterResX：对应于给定 filter 元素上的 filterRes 属性的 X 分量。
  • filterResY：对应于给定 filter 元素上的 filterRes 属性的 Y 分量。
  • filterUnits：定义 filter 属性的坐标系。
  • height: 获取或设置元素的高度。
  • primitiveUnits：指定 filter 原始元素内的各种长度值以及定义 filter 原始元素子区域的属性的坐标系。filter 原始元素标识一个子区域，该子区域限制了给定 filter 原始元素的计算和渲染。默认 filter 原始元素子区域等于 filter 区域。
  • style：获取一个 style 对象。
  • width: 定义元素宽度。
  • x: 获取或设置 x 坐标值。
  • xmllang：获取或设置一个值，该值指定元素的内容和属性值中使用的语言。
  • xmlspace：获取或设置一个值，指示是否保留字符数据中的空格。
  • y: 获取或设置 y 坐标值。

相关规范

SVG 1.1 (第二版)
W3C 推荐标准

参见

相关文章

视觉效果

外部资源

SVG 滤镜效果 https://w3org.cn/TR/SVG/filters.html#FilterElement