对于objectBoundingBox之外的SVG动画，不考虑溢出

Question

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

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

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

＆＃13;

＆＃13;

#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:
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

运行动画（带间隙）：

没有动画（没有间隙）：