如何检测 SVG 动画是否可用
有没有好的方法来检测SVG动画是否可用，然后适当调整DOM？
我正在使用 animateMotion 为包含 image 的 g 的运动设置动画。这只适用于 Mozilla；更糟糕的是，未启动 animateMotion 会使图像在 Mozilla 和 WebKit 中处于不同的位置（但两者的位置不同！）。
看来我需要一种方法来调整 g 和图像的属性来处理每种情况，并且仅在可行时才添加 animateMotion 标签。有什么建议吗？
Is there a good way to detect if SVG animation is available, and then adjust the DOM appropriately?
I'm using animateMotion to animate the motion of a g containing images. This only works in Mozilla; even worse, having the animateMotion unstarted leaves the images in a different position in both Mozilla and WebKit (but not the same place in each!).
It seems I need a way to adjust the properties on the g and images to deal with each scenario, and to add the animateMotion tag only if it would work. Any suggestions?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
Modernizr 仅检测高级功能的存在，并相信浏览器不会撒谎。例如，Desktop Safari 对来自 Modernizr 的 SMIL 给出了一个很大的“是”。但几乎所有浏览器（甚至 Firefox 4！）中都只部分实现了 SMIL，并且您必须测试每个单独的属性动画才能准确地确定哪一个正在工作或不工作。
例如，您无法使用 SMIL 在 Desktop Safari 中对路径动画上的文本的 startOffset 进行动画处理。没有库可以检测此类功能的存在。
恕我直言，如果存在的话，您应该在除 IE 之外的所有设备上使用 CSS 转换/动画来实现通用动画。对于 IE，请使用 Javascript（或 Canvas）动画。
（顺便说一句，Chrome 上的 animateTransform 已损坏 - 它错误计算了翻译）
Modernizr detects only high level feature existence and trusts the browser not to lie. Desktop Safari, for example, has a big "Yes" for SMIL from Modernizr. But SMIL is only partly implemented in pretty much every browser (even Firefox 4!), and you have to test each individual attribute animation to figure out exactly which one is working or not.
For example, you can't animate the startOffset for text on a path animation in Desktop Safari using SMIL. There is no library that detects feature existence for things like this.
IMHO, where they exist you should use CSS transforms/animations for general purpose animation on everything other than IE. For IE, use Javascript (or Canvas) animations.
(BTW, animateTransform on Chrome is broken - it miscalculates the translations)
我刚刚在运行 Android 4.2.2 的三星手机上遇到了这个问题。对于所有这三个，它都会报告为 true：Modernizr.svg、Modernizr.svgclippaths、Modernizr.smil，但没有动画并且剪辑路径混乱。看起来只有一个元素可以有剪辑路径。无论如何，我们以这个不太好的分辨率结束：
抱歉，Android 用户，您只会看到备份图像。这是一个可怕的修复，但它只是为了一个简单的标志动画，所以......
I just had this issue with a Samsung phone running Android 4.2.2. It would report true for all three of these:
Modernizr.svg, Modernizr.svgclippaths, Modernizr.smilbut no animation and the clip-paths where messed up. It looked like only one element could have a clip-path. Anyway, we ended with this not-so-great resolution:Sorry, android users, you'll only see the backup image. This is a horrible fix but it was only for a simple logo animation so...
Modernizr 检测对 SVG 动画 (SMIL) 的支持。
如果没有完整的示例，就不可能确定造成差异的原因。
Modernizr detects support for SVG animation (SMIL).
Without the complete example it's impossible to say for sure what's causing the differences.