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
