最高效的WEB程序员学习网站
SVG手册 HTML5手册
 

SVG <feComposite>


This filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor. Additionally, a component-wise arithmetic operation (with the result clamped between [0..1]) can be applied.

The arithmetic operation is useful for combining the output from the and filters with texture data. If the arithmetic operation is chosen, each result pixel is computed using the following formula:

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

 

where:

  • i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively
  • k1, k2, k3 and k4 indicate the values of the attributes with the same name

SVG光照滤镜


<feDiffuseLighting>标记的作用是产生光照效果滤镜,它使用原图的alpha通道作为纹理图,输出的结果取决于光线颜色,光源位置和图片的物体表面纹理。

下面的例子里将使用<feDiffuseLighting>元素产生点光、平行光、聚光照射的滤镜效果。


SVG颜色滤镜


<feColorMatrix>这个过滤器可以根据颜色矩阵来修改目标图形的色彩效果。每一个像素的颜色值(使用[R,G,B,A]矢量表示)乘以矩阵获得新的颜色值。<feColorMatrix>标记里的type属性的值可以是matrix | saturate | hueRotate | luminanceToAlpha


SVG阴影滤镜


<defs> 和 <filter>

所有的SVG滤镜元素都需要定义在 <defs> 标记内。这个 <defs> 标记是 definitions 这个单词的缩写,可以包含很多种其它标签,包括各种滤镜。

<filter> 标记用来定义SVG滤镜。 <filter> 标记需要一个id属性,它是这个滤镜的标志。SVG图形使用这个id来引用滤镜。


SVG <feOffset>

例 1

<feOffset>标记可以用来让图像产生阴影效果。这个效果的原理很简单,就是让SVG图像的副本沿着x、y轴移动一点。

下面的第一个例子,我们先偏移图像的副本(使用<feOffset>),然后进行图像合并(使用<feBlend>):


  
    
      
      
    
  
  
  抱歉,你的浏览器不支持SVG

上面的图像使用了下面的SVG代码:

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

代码说明:

  • <filter>标记里的id属性定义了这个滤镜的唯一标志
  • <rect>标记里的filter属性定义了需要引用的滤镜是“f1”

例 2

下面,我们将偏移的图形副本进行模糊处理(使用 <feGaussianBlur>):


  
    
      
      
      
    
  
  
抱歉,你的浏览器不支持SVG
 

上面的图像使用了下面的SVG代码:

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

代码说明:

  • <feGaussianBlur>标记里的stdDeviation属性定义了模糊的程度

例三 3

下面,我将实现一个黑色的阴影效果:


  
    
      
      
      
    
  
  
抱歉,你的浏览器不支持SVG
 

上面的图像使用了下面的SVG代码:

<svg height="140" width="140">
  <defs>
    <filter id="f3" 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>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

代码说明:

  • <feOffset>标记里的in属性的值现在使用的是"SourceAlpha",意思是使用图片的Alpha通道进行模糊,而不是完整的RGBA图像

例 4

现在,我们使用颜色来实现阴影效果:


  
    
      
      
      
      
    
  
  
抱歉,你的浏览器不支持SVG
 

上面的图像使用了下面的SVG代码:

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

代码说明:

  • <feColorMatrix>滤镜的作用是用来将偏移后的副本图像颜色变成接近于黑色。在颜色矩阵中有三个‘0.2’,它们将会分别和红、绿、蓝三个通道的值相乘,得出新的颜色。新颜色将会很接近黑色(黑色值是0)

SVG模糊滤镜


<defs> 和 <filter>

所有的SVG滤镜元素都需要定义在 <defs> 标记内。这个 <defs> 标记是 definitions 这个单词的缩写,可以包含很多种其它标签,包括各种滤镜。

<filter> 标记用来定义SVG滤镜。 <filter> 标记需要一个id属性,它是这个过滤器的标志。SVG图形使用这个id来引用滤镜。


SVG <feGaussianBlur>

例 1

这个 <feGaussianBlur> 标记能给SVG图形带来模糊效果:


  
    
      
    
  
  
抱歉,你的浏览器不支持SVG
 

上面的SVG图片使用了下面的代码:

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

代码说明:

  • id属性定义了这个滤镜的唯一标志
  • 使用<feGaussianBlur>标记定义模糊效果
  • in="SourceGraphic"属性指明了模糊效果要应用于整个图片
  • stdDeviation属性定义了模糊的程度
  • <rect>标记内的filter属性里引用了过滤器“f1”

例 2

下面是两个SVG圆形,右边的一样使用了模糊特效:



  
    
  

  

  
抱歉,你的浏览器不支持SVG

上面的SVG图片使用了下面的代码:

<svg width="230" height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <circle cx="60"  cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
</svg>

SVG滤镜简介


SVG滤镜是用来对SVG图像添加一些特殊效果。


浏览器支持情况

下面列出的版本号是各种浏览器对SVG滤镜特征支持的最低版本。

 
SVG滤镜 8.0 10.0 3.0 6.0 9.6

各种SVG滤镜

以后的章节里,我们将向大家展示各种SVG滤镜的用法以及效果。

在SVG里,一共有下面这些滤镜:

  • <feBlend>
  • <feColorMatrix> – 颜色变换
  • <feComponentTransfer>
  • <feComposite>
  • <feConvolveMatrix>
  • <feDiffuseLighting>
  • <feDisplacementMap>
  • <feFlood>
  • <feGaussianBlur>
  • <feImage>
  • <feMerge>
  • <feMorphology>
  • <feOffset> – 阴影效果
  • <feSpecularLighting>
  • <feTile>
  • <feTurbulence>
  • <feDistantLight> – 灯光效果
  • <fePointLight> – 灯光效果
  • <feSpotLight> – 灯光效果
技巧提示:这些SVG滤镜都可以混合使用!