css - objectBoundingBox 外的 SVG 动画不考虑溢出

Question

当使用带有 SVG 滤镜的 primitiveUnits="objectBoundingBox" 并为边界框外的子项设置动画时，滤镜的表示会在动画完成时跳转。在下面的示例中，这通过两个框之间的间隙显示(一个是另一个的克隆)。

有没有办法防止这种情况并强制执行 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>