具有嵌入式CSS动画的SVG在iOS10和iOS11之间表现不同

我有一个基本的SVG日志，并嵌入它中我有一些简单的CSS动画。它正在旋转一个对象，并将旋转的中间作为对象的中心。具有嵌入式CSS动画的SVG在iOS10和iOS11之间表现不同

它看起来很适合iOS10的Chrome/Safari，但是当您在iOS11 Safari中打开它时，旋转是完全疯狂的。

任何人都可以帮助建议为什么/如何适应它？

标志可以在这里看到：

2017-09-25 Nick B

Safari修复了他们关于CSS边界框的错误。 Chrome显然会很快跟风。事物现在围绕viewBox旋转，而不是它们的边界框。 transform-box属性可以改变支持它的浏览器。 Firefox支持转换框 –

当较新的旧版浏览器上的东西看似标准的工作，而不是，你应该检查你的元素的符合标准。 W3C验证器indicates在您的SVG中有3个错误;修复后你应该再试一次。

编辑：好的，现在它已修复。你有没有检查SVG animation bug in safari 11？我刚刚尝试了链接问题中的建议，并修复了它。只需添加变换框：填充框;到你的Swishes的CSS。

它告诉Safari在标准的未确定点上表现得像Chrome一样，即变换百分比值是指边界框还是父边界。您可以在Firefox上发现您遇到的问题。

2017-09-25 10:49:49 Saucistophe

是的，对不起，这是我删除的东西，看它是否影响动画或不跨iOS版本（它没有）。我已经把代码恢复正常，所以它不会给出任何错误。 –

回答