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 | <filter-primitive-reference> 输入名称
• result (输出名称)
  feBlend
  滤镜把两个对象组合在一起，使它们受特定的混合模式控制。这类似于图像编辑软件中混合两个图层。该模式由属性mode定义。
• in
• in2
• mode

feOffset与 feBlend

feBlend

<svg viewBox="0 0 1100 400" version="1.1">
    <desc>
        Filter example
    </desc>
    <filter id="i1" width="150%" height="150%">
        <feOffset result="offOut" in="SourceGraphic" dx="30" dy="30"></feOffset>
        <feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
    </filter>
    <g stroke-width="5" filter="url(#i1)">
        <rect x="10%" y="10%" width="20%" height="20%" stroke="rgb(204, 204, 204)" fill="wheat"></rect>
        <rect x="40%" y="10%" width="20%" height="20%" stroke="green" fill="tomato"></rect> 
    </g>
</svg>

边缘模糊

feColorMatrix

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

<filter>
    <feColorMatrix 
        type="matrix"
        values="   R 0 0 0 0
                   0 G 0 0 0
                   0 0 B 0 0
                   0 0 0 A 0
        "/>
    </feColorMatrix>
</filter>

/* 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

<svg viewBox="0 0 1100 400" version="1.1">
    <desc>
        Filter example
    </desc>
    <filter id="i1" width="120%" height="120%">
       
        <feGaussianBlur in="SourceAlpha" stdDeviation="1"></feGaussianBlur> 
    <feOffset result="offsetblur" dx="2" dy="5"></feOffset>
        <feFlood flood-color="red"></feFlood>
        <feComposite in2="offsetblur" operator="in"></feComposite>
        <feMerge>
            <feMergeNode></feMergeNode>
            <feMergeNode in="SourceGraph"></feMergeNode>
        </feMerge>
    </filter>
    <g stroke-width="1" filter="url(#i1)">
        
        <rect x="40%" y="10%" width="20%" height="20%" stroke="green" fill="white"></rect>
    </g>
</svg>

最新dropshadow可以使用feDropShadow