我在玩CSS-animated SVG 元素，遇到了一个问题，即使使用的所有技术都被某些浏览器支持，但组合不支持，即CSS-animated @987654327 @s 有效，但 SVG 元素无效。我想知道是否有办法检测浏览器是否能够使用CSS 为SVG 元素设置动画。
Here is a jsFiddle 举个例子。它适用于最新版本的 Chrome、Firefox 和 Safari。但是当用例如打开它时Firefox 5 只有 div 旋转，而 rect 不旋转。
【问题讨论】：
标签： css svg cross-browser feature-detection
我并没有完全按照您的要求完成，而是做了类似的事情（在浏览器支持时提供由 SVG 定义的动画剪辑路径，在不支持时提供回退）。您可以使用媒体查询来查找像素比率来确定浏览器是 moz 还是 webkit，并在媒体查询之外提供后备动画，并在媒体查询中提供首选动画，以指示支持它的浏览器。
//fallback animation here
@media (-webkit-min-device-pixel-ratio: 0) {
// webkit animation here
}
至于旧版本的 Firefox？我不知道如何在 CSS 中做到这一点，但我不确定返回多个版本的 Firefox 或 Chrome 是一个常见的用例。
【讨论】：
我相信modernizr 中的SMIL 动画检测应该可以做到。 https://modernizr.com/download?smil-setclasses
我在一组相当复杂的 css/SVG 图表动画中使用它。只需在以下标记中包装一个后备：
.no-smil{ }
【讨论】：
我想知道是否有办法检测浏览器是否能够 使用 CSS 动画 SVG 元素
简单回答：是的，正如@jhpratt 所说，您可以。
您可以检测浏览器是否仅使用 CSS 支持 CSS 功能。
@supports CSS at 规则允许您指定依赖于浏览器对一项或多项特定 CSS 功能的支持的声明。这称为特征查询。
例子：
@supports (display: flex) {
div {
display: flex;
}
}
@supports not (display: flex) {
div {
float: right;
}
}
MDN 链接：https://developer.mozilla.org/de/docs/Web/CSS/@supports
长答案：
您总会遇到一些cross-browser 问题。
您遇到的问题困扰着每个 Web 开发人员。仍然有办法解决这个浏览器支持问题：
1.您可以检查“我可以使用”是否兼容：
链接：http://caniuse.com/ 建议查找任何可疑的功能，例如动画。
2。在您的工作流程中使用自动前缀：
在自动前缀的帮助下，您大部分时间都不必担心使用带有 -moz-、-webkit- 等前缀的 CSS。这个小助手会为您解决问题，您甚至可以告诉一些自动前缀您想要支持哪些浏览器。
3.用户第 3 方库：
您可以使用许多库来检测浏览器和版本。如果您想确保您的动画可以安全使用，您可以简单地使用库中提供的动画，当然还可以在其各自的网站上查看兼容性。
一些大牌：
还有更多，只需搜索万维网。
4.使用 CSS Hacks 检测特定浏览器：
可以使用所谓的 CSS-Hacks。它们是特定的 CSS 调用，仅适用于某些浏览器。
一些例子：
Internet Explorer/Edge 8 only: @media \0screen {}
firefox ≥ 3.6 only: @media screen and (-moz-images-in-menus:0) {}
Opera ≤ 9.27 AND Safari 2: html:first-child .selector {}
您可以在此处查找更多 Browserhacks：http://browserhacks.com/
结论：
可以检测特定浏览器，但无法检测浏览器是否仅使用 CSS 支持给定功能。这就是为什么您在浏览器支持方面总是会遇到一些困难。
希望这会有所帮助。 问候
【讨论】：
@supports 规则，并得到广泛支持。
您可以添加一个事件侦听器来检查动画迭代是否完成，并在相应的事件处理程序中设置一个类似supportsSVGKeyFramedAnimatedProps = true 的标志（如果迭代从未完成，则它没有动画）。
elem.addEventListener('animationiteration', eventHandler, false)
这将允许您“前退”到您的 SVG 动画，而不是提供后备。
【讨论】：
animationstart，因为它只会触发一次。