SVG中feDropShadow阴影被裁剪，如何创建无裁剪投影？

SVG滤镜默认的作用区域刚好贴合元素的边界盒，当你设置较大的stdDeviation（模糊半径）时，阴影会超出这个区域，自然就被裁剪了。要解决这个问题，只需要给<filter>标签显式设置扩展的作用区域即可：

具体修改方法 #

在每个<filter>中添加x、y、width、height属性，给阴影留出足够的扩展空间。属性值用百分比表示，相对于元素的边界盒计算：

• x和y设为负数，让滤镜区域向元素外扩展
• width和height设为大于100%的值，扩大滤镜的整体范围

针对你的代码，修改后的滤镜部分如下：

<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
    <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>
<filter id="shadow2" x="-10%" y="-10%" width="120%" height="120%">
    <feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="cyan"/>
</filter>
<filter id="shadow3" x="-10%" y="-10%" width="120%" height="120%">
    <feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0" flood-color="pink" flood-opacity="0.5"/>
</filter>

调整建议 #

如果你的stdDeviation值更大（比如5以上），可以适当增大扩展比例，比如把x和y设为-20%，width和height设为140%，确保阴影完全显示。

另外，如果你需要针对固定尺寸的元素，也可以使用filterUnits="userSpaceOnUse"来设置绝对坐标的滤镜区域，但百分比方式更适配不同尺寸的元素，通用性更强。

内容的提问来源于stack exchange，提问作者Akhil Biju