animation - 如何检测 SVG 动画是否可用

Question

有没有好办法检测SVG动画是否可用，然后适当调整DOM？

我正在使用 animateMotion 为g包含images 的运动设置动画。这仅适用于 Mozilla；更糟糕的是，animateMotion未启动的图像在 Mozilla 和 WebKit 中的位置不同（但在每个位置都不相同！）。

似乎我需要一种方法来调整 g 和 images 上的属性以处理每种情况，并且animateMotion只有在它可以工作时才添加标签。有什么建议么？

Answer 1

我刚刚在运行 Android 4.2.2 的三星手机上遇到了这个问题。它会报告所有这三个方面的真实情况：Modernizr.svg, Modernizr.svgclippaths, Modernizr.smil但没有动画和混乱的剪辑路径。看起来只有一个元素可以有剪辑路径。无论如何，我们以这个不太好的解决方案结束：

isAndroid = /Android/.test( navigator.userAgent );

抱歉，android 用户，您只会看到备用图片。这是一个可怕的修复，但它只适用于一个简单的徽标动画，所以......

Answer 2

Modernizr 仅检测高级功能的存在并相信浏览器不会撒谎。例如，Desktop Safari 对 Modernizr 的 SMIL 有一个很大的“是”。但是几乎所有浏览器（甚至 Firefox 4！）都只部分实现了 SMIL，并且您必须测试每个单独的属性动画才能准确确定哪个在工作或不工作。

例如，您不能使用 SMIL 为 Desktop Safari 中路径动画上的文本的 startOffset 设置动画。没有库可以检测此类功能是否存在。

恕我直言，如果它们存在，您应该在 IE 以外的所有东西上使用 CSS 转换/动画来实现通用动画。对于 IE，使用 Javascript（或 Canvas）动画。

（顺便说一句，Chrome 上的 animateTransform 已损坏 - 它错误计算了翻译）

Answer 3

Modernizr检测到对 SVG 动画 (SMIL) 的支持。

如果没有完整的示例，就不可能确定导致差异的原因。