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

Question

你好!

我正在重新设计我的 site和 我有一堆 svg/css 动画在 chrome 之外中断，我不知道为什么。

这似乎与处理多个嵌套动画和变换源有关(他们没有处理它们)。

我检查了兼容性 - 很好，如果浏览器以不同方式处理来源 - 不会。

我没有足够的代表来发布适当的链接(太多)和代码(太长):\但如果您能检查该网站，我将非常感激。

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

编辑: 固定测试用例 http://codepen.io/anon/pen/KJlkb

回答:Firefox 不支持对象的百分比(我不确定，但它似乎只影响路径和 g 元素)。

解决方案:使用像素而不是百分比制作动画。使用变换原点，就好像它与 SVG viewBox 尺寸而不是对象尺寸相关。

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

Answer 1

回答:Firefox 不支持对象的百分比(我不确定，但它似乎只影响路径和 g 元素)。

解决方案:使用像素而不是百分比制作动画。使用变换原点，就好像它与 SVG viewBox 尺寸而不是对象尺寸相关。

固定测试用例 http://codepen.io/anon/pen/KJlkb现在在 FF 中工作。

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