📌  相关文章
📜  SVG-过滤器

📅  最后修改于: 2020-10-19 02:50:04             🧑  作者: Mango

SVG使用元素定义过滤器。 元素使用id属性唯一地标识它.filters在元素中定义，然后由图形元素通过其id进行引用。

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

  • 二月
  • feColorMatrix
  • feComponentTransfer
  • feCompsite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • 非高斯模糊
  • feImage
  • 合并
  • 形态学
  • feOffset-过滤阴影
  • feSpecularLighting
  • 功能
  • 动荡
  • 远光
  • fePointLight
  • feSpotLight

宣言

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

属性

Sr.No. Name & Description
1 filterUnits − units to define filter effect region. It specifies the coordinate system for the various length values within the filter and for the attributes defining the filter subregion. If filterUnits=”userSpaceOnUse”, values represent values in the current user coordinate system in place at the time when the ‘filter’ element is used. If filterUnits=”objectBoundingBox”, values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the ‘filter’ element is used. Default is userSpaceOnUse.
2 primitiveUnits − units to define filter effect region. It specifies the coordinate system for the various length values within the filter and for the attributes defining the filter subregion. If filterUnits=”userSpaceOnUse”, values represent values in the current user coordinate system in place at the time when the ‘filter’ element is used. If filterUnits=”objectBoundingBox”, values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the ‘filter’ element is used. Default is userSpaceOnUse.
3 x − x-axis co-ordinate of the filter bounding box. Defeault is 0.
4 y − y-axis co-ordinate of the filter bounding box. Default is 0.
5 width − width of the filter bounding box. Default is 0.
6 height − height of the filter bounding box. Default is 0.
7 filterRes − numbers representing filter regions.
8 xlink:href − used to refer to another filter.

例

testSVG.htm

SVG Filter
   
   
      
Sample SVG Filter

   
      
      
         
            
               
            
            
            
               
               
               
            
         
         
         
            Using Filters (Blur Effect):

  • 两个元素定义为filter1和filter2。

  • feGaussianBlur滤镜效果使用stdDeviation使用模糊量定义模糊效果。

  • in =“ SourceGraphic”定义该效果适用于整个元素。

  • feOffset滤镜效果用于创建阴影效果。 in =“ SourceAlpha”定义该效果适用于RGBA图形的alpha部分。

  • 元素使用filter属性链接过滤器。

输出

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

过滤阴影效果

SVG Filter
   
      
      
Sample SVG Filter

      
      
      
         
            
               
            
            
            
               
               
               
            
         
         
         
            Using Filters (Shadow Effect):

输出

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