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

terry 2年前 (2023-09-27) 阅读数 68 #数据结构与算法

SVG 使用定义滤镜。元素使用属性 id 来标识自身。过滤器使用元素定义，然后使用具有 id 的图像元素进行渲染。

SVG 提供了许多过滤器。以下是常用过滤器的列表。

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feComponentTransfer
feComposite feConvolveMatrix♿❀♿♿ p
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 阴影过滤器
feSpecularLighting
feTile
feTurbulence

fe DistantLightLightfePopotLight fe声明5以下是 组件语法语句。这里仅显示一些基本属性。 <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>
XML属性
编号 名称 描述
1 过滤器单位用于定义区域。它定义了过滤器中各种长度值的坐标系以及定义过滤器子区域的属性。如果 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 宽度 过滤器边界框的宽度。默认值为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>
HTML这里有一个说明 ♸♸♸♸♸♸♸ 8 项目描述 对于 filter1 和 filter2。

feGaussianBlur 使用stdDeviation 模糊量定义滤镜的效果。
in="SourceGraphic" 指定该效果应用于整个元素。
feOffset 滤镜效果用于创建阴影效果。 in = "SourceAlpha" 描述此效果适用于 RGBA 图像的 Alpha 部分。
元素使用 filter 属性关联过滤器。

编号	名称	描述
1	`过滤器单位用于定义区域。它定义了过滤器中各种长度值的坐标系以及定义过滤器子区域的属性。如果 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	`宽度`	过滤器边界框的宽度。默认值为`0`。
6	`height`	过滤器边界框的高度。默认值为`0`。
7	`filterRes`	表示过滤区域的数量。
8	`xlink:href`	用于指定另一个过滤器。