SVG - 过滤器

SVG 使用 <filter> 元素来定义过滤器。<filter> 元素使用 id 属性来唯一标识它。过滤器在 <def> 元素中定义，然后由图形元素通过其 id 引用。

SVG 提供了一组丰富的滤镜。以下是常用过滤器的列表。

混合型
fe颜色矩阵
fe组件传输
铁复合材料
fe卷积矩阵
fe漫射照明
fe位移贴图
洪水
高斯模糊
fe图像
费合并
形态学
feOffset - 阴影过滤器
fe镜面照明
菲莱
湍流
远光
菲点光
fe聚光灯

宣言

以下是<filter>元素的语法声明。我们仅展示了主要属性。

<过滤器
   filterUnits="定义滤镜效果区域的单位"
   PrimitiveUnits =“定义原始过滤器子区域的单位”
   
   x=“x轴坐标”
   y=“y轴坐标”     
   
   宽度=“长度”
   高度=“长度”
   
   filterRes=“过滤区域的数字”
   xlink:href="引用另一个过滤器" >
</过滤器>

属性

先生。	名称和描述
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 - 用于引用另一个过滤器。

例子

测试SVG.htm

<html>
   <标题>SVG过滤器</标题>
   <正文>
   
      <h1>示例 SVG 过滤器</h1>
   
      <svg宽度=“800”高度=“800”>
      
         <定义>
            <过滤器id =“过滤器1”x =“0”y =“0”>
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </过滤器>
            
            <过滤器id =“filter2”x =“0”y =“0”宽度=“200％”高度=“200％”>
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="正常" />
            </过滤器>
         </defs>
         
         <g>
            <text x="30" y="50" >使用滤镜（模糊效果）：</text>
            <矩形x =“100”y =“100”宽度=“90”高度=“90”描边=“绿色”描边宽度=“3”
            填充=“绿色”过滤器=“url（#filter1）”/>      
         </g>
         
      </svg>
   
   </正文>
</html>

两个 <filter> 元素定义为filter1 和filter2。
feGaussianBlur 滤镜效果使用 stdDeviation 定义模糊效果和模糊量。
in="SourceGraphic" 定义该效果适用于整个元素。
feOffset 滤镜效果用于创建阴影效果。in="SourceAlpha" 定义该效果适用于 RGBA 图形的 alpha 部分。
<rect> 元素使用 filter 属性链接过滤器。

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

带阴影效果的滤镜

<html>
   <标题>SVG过滤器</标题>
   <正文>
      
      <h1>示例 SVG 过滤器</h1>
      
      <svg宽度=“800”高度=“800”>
      
         <定义>
            <过滤器id =“过滤器1”x =“0”y =“0”>
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </过滤器>
            
            <过滤器id =“filter2”x =“0”y =“0”宽度=“200％”高度=“200％”>
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="正常" />
            </过滤器>
         </defs>
         
         <g>
            <text x="30" y="50" >使用滤镜（阴影效果）：</text>
            <矩形x =“100”y =“100”宽度=“90”高度=“90”描边=“绿色”描边宽度=“3”
            填充=“绿色”过滤器=“url（#filter2）”/>
         </g>
         
      </svg>
   
   </正文>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。