为何SVG滤镜适配viewBox尺寸却忽略其位置？求更优方案

核心问题根源 #

你碰到的滤镜截断、部分线条消失问题，本质是SVG滤镜默认坐标系统的特性导致的：默认filterUnits="objectBoundingBox"下，x=-10%、y=-10%这类参数是相对于单个元素的包围盒计算的。当元素位置远离SVG原点，或viewBox与元素坐标系不匹配时，滤镜区域会无法完整覆盖元素，进而出现线条被截断甚至完全消失的情况。

最优解决方法：切换到userSpaceOnUse坐标系统 #

直接给<filter>标签添加filterUnits="userSpaceOnUse"属性，让滤镜的坐标系统与SVG的用户空间（即viewBox定义的坐标系）保持一致：

<filter id="blur" filterUnits="userSpaceOnUse">
  <feGaussianBlur stdDeviation="2"/>
</filter>

该方案的优势

• 零手动计算：默认的x=-10%、y=-10%、width=120%、height=120%会自动基于整个viewBox的尺寸扩展10%，完整覆盖所有元素的模糊范围。
• 低维护成本：后续修改viewBox时，无需重新调整滤镜参数，滤镜区域会自动适配新的viewBox范围。
• 兼容性可靠：所有现代浏览器均支持该属性，完全符合W3C规范。

备选方案（仅需元素级滤镜缩放时使用） #

如果需要滤镜跟随单个元素的大小同步缩放（比如元素被缩放时，模糊范围也对应调整），可以保留filterUnits="objectBoundingBox"，但显式声明滤镜范围：

<filter id="blur" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="120%" height="120%">
  <feGaussianBlur stdDeviation="2"/>
</filter>

不过这种方案在元素位置大幅偏移时仍可能出现问题，且修改viewBox时需要重新校验参数，整体维护成本高于第一种方案。

内容的提问来源于stack exchange，提问作者Joseph Sible-Reinstate Monica