objectBoundingBox 之外的 SVG 动画不考虑溢出答案

【问题标题】：Overflow is not respected for SVG animations outside objectBoundingBoxobjectBoundingBox 之外的 SVG 动画不考虑溢出
【发布时间】：2018-03-13 03:37:58
【问题描述】：

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

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

带运行动画（带间隙）：

没有动画（没有间隙）：

【问题讨论】：

我真的不确定我应该在这里看到（或不看到）什么。我在 Mac 上尝试过 Firefox 和 Chrome，删除动画只会停止动画。
我添加了两个屏幕截图来显示动画创建的间隙。在 Mac 上的 Chrome 上运行——Safari 打破并覆盖了两个矩形； Firefox 正在像它应该的那样呈现。请注意，我与 Chrome 绑定在一起，因为一切都在 Electron 中运行。

标签： css svg overflow svg-filters

【解决方案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>

【讨论】：