div通过css设置修改达到shadow效果,而将其转换为SVG时却较为麻烦
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
边缘模糊
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