是什么导致这些SVG / CSS动画在某些浏览器中中断？

Question

嘿那里！

我正在重新设计我的site和 我有一堆svg / css动画在chrome之外突破，我无法弄清楚原因。

它似乎与处理多个嵌套动画和转换起源（它们没有处理它们）有关。

我检查了兼容性 - 好，如果浏览器处理起源不同 - 不。

我没有足够的代表发布相应的链接（太多）和代码（太长）：\但如果您可以检查该网站，我将非常感激。

提前感谢您为此付出的任何努力。

编辑：已修复测试用例http://codepen.io/anon/pen/KJlkb

答案：Firefox不支持对象的百分比（我不确定，但它似乎只影响路径和g元素）。

解决方案：使用像素而非百分比进行动画处理。使用变换原点，就好像它与SVG视图框尺寸而不是对象尺寸相关。

感谢Robert Longson让我走上了正确的道路。他的链接在评论中。

Answer 1

答案： Firefox不支持对象的百分比（我不确定，但它似乎只影响路径和g元素）。

解决方案：使用像素而非百分比进行动画处理。使用变换原点，就好像它与SVG视图框尺寸而不是对象尺寸相关。

修复测试用例http://codepen.io/anon/pen/KJlkb现在可用于FF。

感谢Robert Longson让我走上了正确的道路。他的链接在评论中。