javascript - 父 DIV 的 CSS 干扰 SVG 动画

Question

我们已将使用 Adob​​e After Effects Bodymovin 插件创建的 SVG/JS 动画从一个 Wordpress 站点移动到另一个站点。在旧站点(遗憾的是我无法向您展示)上，动画效果完美无缺。在新站点上，根据浏览器窗口的大小，动画中包含一些故障，这些故障似乎是由动画 mask 中的某种舍入错误引起的。

在地球的一个或多个边缘上，您偶尔会(取决于视口(viewport)宽度)看到一个像素宽的滚动背景图形出现。见图片。

我已经在 CodePen 中隔离了动画。它工作正常here ，无论视口(viewport)设置为多大。

但是，当我引入像这样的一小段 CSS 时......

margin: 0 auto;
width: 70%;

...进入父 DIV 的样式，故障开始发生。 See here .

在原始动画中， mask 比地球的边缘延伸得更远，所以我怀疑 mask 现在刚好到达地球的边缘这一事实是某种 Bodymovin 优化。

鉴于这不会发生在旧网站上，我怀疑有某种 CSS，或者 Bodymovin 中的设置可以阻止这种情况发生。

Wordpress 网站是用 Divi 构建的，动画位于一个 DIV 中，该 DIV 嵌套在许多其他 DIV 中(即，一个模块位于一列中，一行中位于一个部分中)，并且这些 DIV 中的大多数都设置了宽度到各种百分比。所以我不认为解决方案在于简化 CSS。

有没有人遇到过这样的问题？或者有可能有助于消除它的建议？

我还创建了一个 Issue在 Bodymovin GitHub 页面上，但那里的响应时间似乎差异很大。

Answer 1

我已经在 codepen 上做了一些测试，当我删除它时能够让它工作

transform: translate3d(0px, 0px, 0px);

所以删除这行脚本应该可以解决问题

this.svgElement.style.transform="translate3d(0,0,0)")

当 svg 已经自动转换时，你为什么要尝试转换它。

如果您仍想保留边距和宽度 % 的设置，这是一个可能的解决方法。