SVG滤镜区域太小时为什么会裁掉模糊边缘

SVG 模糊边缘被“切平”，通常不是 没有生效，而是滤镜结果超出了 的有效区域。先扩大 x、y、width、height，再根据元素尺寸决定是否使用 filterUnits="userSpaceOnUse"。

官方参考地址：https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur

裁掉的边缘其实发生在 filter 区域

feGaussianBlur 只负责计算模糊，最终能显示多少还要受外层 filter 区域限制。MDN 对 的默认值说明是：x 和 y 为 -10%，width 和 height 为 120%。这个默认留白能覆盖常见的小半径模糊，但当 stdDeviation 较大、元素贴近 SVG 视口边缘，或后面还有裁剪路径时，外扩像素仍可能被截断。

可以把问题拆成三个实体：原始图形、滤镜原语和滤镜区域。原始图形决定输入范围，stdDeviation 决定扩散程度，filter 的四个尺寸属性决定哪些结果像素能留下。只改第三个实体，才是在修复“模糊边缘被裁掉”。

先用更大的相对区域修正常见情况

如果图形大小会随布局变化，通常先扩大百分比区域即可。下面的写法仍使用默认的 objectBoundingBox 坐标，区域会相对引用该滤镜的元素计算：

这里扩大的是容器，不是把 stdDeviation 随意调小。后者会改变视觉效果，可能让阴影变硬；前者只增加可呈现的结果空间。若仍见到直线边界，继续检查外层 的 overflow、祖先元素的 CSS overflow: hidden，以及是否叠加了 clip-path。

需要固定像素范围时改用 userSpaceOnUse

filterUnits 决定 x、y、width、height 的坐标系。默认的 objectBoundingBox 使用引用元素的边界框比例；userSpaceOnUse 则使用当前 SVG 用户坐标系。对有明确 viewBox 的图标或画布，后者更容易按像素规划留白：

stdDeviation="14 6" 表示横向和纵向使用不同的模糊程度；它不等于把滤镜区域扩大。前者改变效果半径，后者决定结果是否有地方可绘制。两者要一起看，不能只调一个属性。

按这个顺序排查，避免误改模糊参数

1. 先把 stdDeviation 临时调小。如果边缘恢复，说明扩散范围确实需要更多留白。
2. 检查 filter 的四个区域属性，确认没有写成过小的百分比或固定宽高。
3. 确认 filterUnits 与数值写法一致：百分比通常配 objectBoundingBox，固定 SVG 坐标配 userSpaceOnUse。
4. 若滤镜区域已足够，再查 viewBox、overflow、clip-path 和父级裁剪。

实战中建议先用 -30% 到 170% 做相对区域的快速修复，再根据图标尺寸是否稳定决定是否切到用户坐标。这样能把“效果半径”和“可绘制区域”分开调整，后续换尺寸时也更容易维护。

常见问题

为什么默认 120% 仍然不够？

默认值只是常见场景的起点。较大的 stdDeviation、靠近画布边缘的图形、额外的父级裁剪都会让有效显示范围变小。

把 stdDeviation 调小是不是最简单的办法？

它能减少外溢，但同时改变模糊观感。若设计要求保持原来的柔和程度，应优先扩大 filter 区域。

filterUnits 设成 userSpaceOnUse 后为什么位置不对？

因为此时四个区域值不再按元素边界框百分比解释，而是按 SVG 用户坐标解释。需要结合 viewBox 重新计算区域位置和大小。