为何SVG滤镜效果会溢出元素边界？如何修复？

1. 用feClipPath严格约束滤镜渲染范围 #

既然objectBoundingBox的100%范围未生效，直接在滤镜内部通过裁剪路径锁定渲染区域：

• 先定义一个与元素border-box完全匹配的clipPath，采用objectBoundingBox坐标系；
• 在滤镜中生成feFlood颜色层后，用feClipPath引用裁剪路径，确保效果不会溢出元素边界。

示例代码：

<style>
  .text-box {
    width: 200px;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 0 2px red; /* 标记元素边界 */
    font-size: 48px; /* 放大文本 */
    filter: url(#flood-filter);
  }
</style>

<svg width="0" height="0" viewBox="0 0 100 100">
  <defs>
    <clipPath id="element-clip" clipPathUnits="objectBoundingBox">
      <rect x="0" y="0" width="1" height="1" />
    </clipPath>
    <filter id="flood-filter" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
      <feFlood flood-color="#ff0000" flood-opacity="0.3" />
      <feClipPath clip-path="url(#element-clip)" />
      <feBlend mode="multiply" in="SourceGraphic" />
    </filter>
  </defs>
</svg>

<div class="text-box">放大文本</div>

2. 强制滤镜原语使用元素边界盒坐标系 #

默认primitiveUnits为userSpaceOnUse，易与objectBoundingBox产生计算偏差。显式设置primitiveUnits="objectBoundingBox"，让滤镜内部所有原语以元素边界盒为基准，同时给feFlood指定精确的范围值：

<filter id="flood-filter" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
  <feFlood flood-color="#ff0000" flood-opacity="0.3" x="0" y="0" width="1" height="1" />
  <feBlend mode="multiply" in="SourceGraphic" />
</filter>

3. 用伪元素承载滤镜，隔离文本布局干扰 #

如果文本的行高或字体导致元素内容盒超出边界盒，将滤镜转移到与元素完全重合的伪元素上，彻底规避文本布局的影响：

.text-box {
  position: relative;
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 0 0 2px red;
  font-size: 48px;
}
.text-box::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: url(#flood-filter);
  pointer-events: none; /* 不干扰文本交互 */
}

4. 半高度滤镜的精确校准 #

若需将滤镜应用到元素一半高度，结合primitiveUnits="objectBoundingBox"显式设置范围，若存在渲染精度误差，可微调参数抵消偏差：

<filter id="half-flood-filter" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
  <feFlood flood-color="#ff0000" flood-opacity="0.3" x="0" y="0" width="1" height="0.5" />
  <!-- 若有偏差，可改为height="0.498"这类微调值 -->
  <feBlend mode="multiply" in="SourceGraphic" />
</filter>

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