svg dropshadow实现

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

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

feBlend

边缘模糊

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

最新dropshadow可以使用feDropShadow