objectBoundingBox 外的 SVG 动画不考虑溢出

Question

将 primitiveUnits="objectBoundingBox" 与 SVG 过滤器一起使用并在边界框外设置子项动画时，过滤器的表示会在动画完成后跳转。在下面的示例中，这通过两个框之间的间隙显示（一个是另一个的克隆）。

有没有办法防止这种情况并强制执行 overflow:none？

（没有跳转，因为动画是无限的。要测试，请删除 id #animate：这两个框将紧挨着彼此。）

#container {
  filter: url(#offset);
  width: 120px;
  height: 80px;
  border: 1px solid #000;
  overflow: hidden;
}

#animate {
    animation: move_in 3s linear reverse infinite;
}

@keyframes move_in {
    100% {
        transform: translateX(-50%);
    }
}

svg {
  display: none:
}

<div id="container">
  <div id="animate" >Test</div>
  <div>Test 2</div>
</div>

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="offset" primitiveUnits="objectBoundingBox" width="200%" height="100%" x="0" y="0" color-interpolation-filters="sRGB">
        <feOffset      result="SourceGraphicOffset"   in="SourceGraphic"  dx="1" dy="0" />
        <feMerge>
            <feMergeNode in="SourceGraphic" />
            <feMergeNode in="SourceGraphicOffset" />
        </feMerge>
    </filter>
</svg>

编辑：添加了两个描述片段的屏幕截图（因为某些浏览器似乎显示不同）。

带有运行动画（有间隙）：

无动画（无间隙）：

Answer 1

刚刚发现使用 viewBox 也可以实现同样的效果，本质上是为 feOffsetNode 提供与之前的 objectBoundingBox 相似的相对大小。（感谢这个回答：svg viewBox attribute）

#container {
  filter: url('#offset');
  width: 120px;
  height: 80px;
  border: 1px solid #000;
  overflow: hidden;
}

#animate {
    animation: move_in 3s linear reverse infinite;
}

@keyframes move_in {
    100% {
        transform: translateX(-50%);
    }
}

svg {
  display: none:
}

<div id="container">
  <div id="animate" >Test</div>
  <div>Test 2</div>
</div>

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="offset" viewBox="0 0 120 80" width="200%" height="100%" x="0" y="0" color-interpolation-filters="sRGB">
        <feOffset result="SourceGraphicOffset" in="SourceGraphic" dx="120" dy="0" />
        <feMerge>
            <feMergeNode in="SourceGraphic" />
            <feMergeNode in="SourceGraphicOffset" />
        </feMerge>
    </filter>
</svg>

objectBoundingBox 外的 SVG 动画不考虑溢出

Overflow is not respected for SVG animations outside objectBoundingBox

css

svg

overflow

svg-filters