13.2 SVG投影效果(Drop Shadow)

SVG使用投射偏移结合模糊特性来实现阴影特效

SVG <feOffset>

SVG的投影效果和CSS3的drop-shadow属性类似。

实例代码1 - 简单投影


  
    
      
      
    
  
  

代码解释

  • 上述代码定义了1个矩形(rect)元素和2个滤镜元素feOffset和feBlend
  • rect元素通过id(为f1)链接到滤镜feOffset,表示将产生一个在x和y方向上偏移(20px,20px)的投影
  • feBlend滤镜效果使得源元素覆盖在投影元素之上
  • in="SourceGraphic" 表示效果应用于整个图形元素

实例代码2 - 模糊投影


  
    
      
      
      
    
  
  

代码解释

  • 在例子1上通过feGaussianBlur滤镜添加了模糊效果,该模糊效果只应用在投影元素上。
  • stdDeviation属性用来定义高斯模糊的程度。

实例代码3 - 暗影效果


  
    
      
      
      
    
  
  

代码解释

  • <feOffset> 元素的in属性被修改为"SourceAlpha",这将只把模糊效果使用在Alpha通道上,而不是整个RGBA像素。

实例代码3 - 颜色变换


  
    
      
      
      
      
    
  
  
自己试试 »

代码解释

  • <feColorMatrix> 过滤器用来把投影图片的RGB色值分别调整为原来的0.2倍,效果就是图片变暗接近黑色,如果把矩阵乘法的系数调整为0,就是black颜色=rbga(0,0,0,1)。