SVG教程：元素定义滤镜与阴影效果示例

2018-12-20

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="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"

   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     

   width="length"
   height="length"

   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

属性

编号	名称	描述
1	`filterUnits`	用来定义滤镜效果区域的单位。它为滤镜中的各种长度值以及定义滤镜子区域的属性指定了坐标系。如果`filterUnits =“userSpaceOnUse”`，则值表示使用`'filter'`元素时当前用户坐标系中的值。如果`filterUnits =“objectBoundingBox”`，值表示在使用`'filter'`元素时就地引用元素上边界框的分数或百分比值。默认是`userSpaceOnUse`。
2	`primitiveUnits`	用来定义滤镜效果区域的单位。它为滤镜中的各种长度值以及定义滤镜子区域的属性指定了坐标系。如果`filterUnits =“userSpaceOnUse”`，则值表示使用`'filter'`元素时当前用户坐标系中的值。如果`filterUnits =“objectBoundingBox”`，值表示在使用`'filter'`元素时就地引用元素上边界框的分数或百分比值。默认是`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>Sample SVG Filter</h1>
      <svg width="800" height="800">
         <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" >Using Filters (Blur Effect): </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>元素使用filter属性链接过滤器。

在Chrome浏览器中打开文件:textSVG.html，结果如下 -

滤镜与阴影效果

<html>
   <title>SVG Filter</title>
   <body>

      <h1>Sample SVG Filter</h1>

      <svg width="800" height="800">

         <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" >Using Filters (Shadow Effect): </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浏览器中打开文件:textSVG.html，结果如下 -

THE END

SVG教程：笔画(stroke)属性及示例

<<上一篇

SVG教程：元素定义模式，并以平铺方式填充图形元素

下一篇>>

SVG教程： 元素定义滤镜与阴影效果示例

声明

示例

SVG教程：元素定义滤镜与阴影效果示例