svg dropshadow实现

div通过css设置修改达到shadow效果,而将其转换为SVG时却较为麻烦


svg dropshadow实现_第1张图片
div shadow

svg 实现shadow的方式是通过filter添加滤镜 svgBase

Drop Shadows - feOffset

feOffset 使得图像进行偏移得到
feOffset参数

  • dx:元素在x轴方向的偏移
  • dy
  • in : SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | 输入名称
  • result (输出名称)
    feBlend
    滤镜把两个对象组合在一起,使它们受特定的混合模式控制。这类似于图像编辑软件中混合两个图层。该模式由属性mode定义。
  • in
  • in2
  • mode

feOffset与 feBlend

svg dropshadow实现_第2张图片
feBlend

    
        Filter example
    
    
        
        
    
    
        
         
    

边缘模糊

feColorMatrix

矩阵来影响每个通道的颜色RGBA


    
    


/* R G B A 1 */ 
1 0 0 0 0 // R = 1*R + 0*G + 0*B + 0*A + 0
0 1 0 0 0 // G = 0*R + 1*G + 0*B + 0*A + 0 
0 0 1 0 0 // B = 0*R + 0*G + 1*B + 0*A + 0 
0 0 0 1 0 // A = 0*R + 0*G + 0*B + 1*A + 0

    
        Filter example
    
    
       
         
    
        
        
        
            
            
        
    
    
        
        
    

最新dropshadow可以使用feDropShadow

你可能感兴趣的:(svg dropshadow实现)