SVG Filters（过滤器）

上一节

SVG使用<filter>元素定义过滤器。<filter>元素使用ID属性作为唯一标识。过滤器在<def>元素里定义，然后通过它们的ID在图形元素里引用。

SVG提供丰富的过滤器设置，如下列表是常用的过滤器。

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset - filter for drop shadows
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

说明

如下是<filter>元素的语法说明，这里只介绍主要的属性。

<filter
   filterUnits="定义过滤器区域单元"
   primitiveUnits="定义过滤器次区域单元"
   
   x="x轴坐标" 
   y="y轴坐标"     
   
   width="长度"
   height="长度"
   
   filterRes="过滤器区域数目"
   xlink:href="引用另一个过滤器" >
</filter>

属性

NO. 名称和描述
1 filterUnits − 定义过滤器效应区域单元。它指定了在过滤器内的各种长度值的坐标系和定义过滤器次区域的属性。如果filterUnits="userSpaceOnUse"，值表示是当前用户坐标系内的值；如果filterUnits="objectBoundingBox"，值表示包围盒子的分数或百分比值。默认是userSpaceOnUse。
2 primitiveUnits − 定义过滤器效应次区域单元。它指定了在过滤器内的各种长度值的坐标系和定义过滤器次区域的属性。如果filterUnits="userSpaceOnUse"，值表示是当前用户坐标系内的值；如果filterUnits="objectBoundingBox"，值表示包围盒子的分数或百分比值。默认是userSpaceOnUse。
3 x − 过滤器盒子的x轴坐标，默认是0。
4 y − 过滤器盒子的y轴坐标，默认是0。
5 width − 过滤器盒子的宽度，默认是0。
6 height − 过滤器盒子的高度，默认是0。
7 filterRes − 过滤器区域数。
8 xlink:href − 用来引用另一个过滤器。

实例：模糊效果

testSVG.html
<html>
   <title>SVG Filter</title>
   <body>
      <h1>SVG Filter实例</h1>
      <svg width="300" height="400">
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter> 
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         <g>
            <text x="30" y="50" >使用过滤器（模糊效果）: </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
      </svg>
   </body>
</html>
  • 两个 <filter> 元素定义 filter1 和 filter2.
  • feGaussianBlur 滤镜效果定义模糊效果，使用 stdDeviation 定义大量的模糊效果.
  • in="SourceGraphic" 定义效果应用于整个元素.
  • feOffset 滤镜效果用于创建阴影效果，in="SourceAlpha" 定义效果应用于RGBA图形的alpha部分.
  • <rect> 元素使用过滤器属性连接过滤器.

输出

在Chrome浏览器上打开文件，你能用Chrome/Firefox/Opera或IE9+直接看到SVG图像而不用任何插件，在IE8里需要使用activeX控件才能看SVG图像。

SVG Filter实例

SVG Filter实例

实例：阴影效果

testSVG.html
<html>
   <title>SVG Filter</title>
   <body>
      <h1>SVG Filter实例</h1>
      <svg width="300" height="400">
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         <g>
            <text x="30" y="50" >使用过滤器 (阴影效果): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
      </svg>
   </body>
</html>

输出

在Chrome浏览器上打开文件，你能用Chrome/Firefox/Opera或IE9+直接看到SVG图像而不用任何插件，在IE8里需要使用activeX控件才能看SVG图像。

SVG过滤器（阴影效果）

SVG过滤器（阴影效果）

上一节