我正在尝试使用 CSS 动画 SVG 元素，并遇到了一个问题，即使所有使用的技术都被某些浏览器支持，但组合起来却不支持，例如 CSS 动画 DIV 可以工作，而 SVG 元素不行。我想知道是否有一种方法可以检测浏览器是否能够使用 CSS 对 SVG 元素进行动画处理。
这里有一个 jsFiddle 示例，它可以在最新版本的 Chrome、Firefox 和 Safari 中运行。但是当在 Firefox 5 中打开它时，只有 div 会旋转，而 rect 不会。
我想知道是否有一种方法可以检测浏览器是否能够使用CSS来动画SVG元素。
简单回答：是的，正如@jhpratt所说。
你可以只用CSS检测浏览器是否支持CSS功能。 @supports CSS规则允许你指定依赖于浏览器对一个或多个特定CSS功能的支持的声明。这被称为特性查询。
例如：
@supports (display: flex) {
div {
display: flex;
}
}
@supports not (display: flex) {
div {
float: right;
}
}
MDN链接: https://developer.mozilla.org/de/docs/Web/CSS/@supports
长答案:
你总会遇到一些跨浏览器的问题。你遇到的问题困扰着每个Web开发人员。但是，仍然有方法可以解决这个浏览器支持问题：
1. 您可以检查“can I use”以了解兼容性：
链接：http://caniuse.com/ 建议查找任何可疑的功能，例如动画。
2. 在您的工作流程中使用自动前缀：
借助自动前缀，您大多数时候不必担心使用带有前缀的CSS（如-moz-，-webkit-等）。这个小助手会为您完成这项任务，您甚至可以告诉某些自动前缀要支持哪些浏览器。
3. 使用第三方库：
有许多库可以用来检测浏览器和版本。如果你想确保你的动画是安全可用的，你可以简单地使用这些库提供的动画，并在它们各自的网站上查看兼容性。
一些大牌：
还有很多，只要在全球网络中搜索。
4. 使用CSS Hack检测特定的浏览器：
可以使用所谓的CSS Hack。它们是特定的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 {}
supportsSVGKeyFramedAnimatedProps = true （如果迭代从未完成，则不会进行动画）。
elem.addEventListener('animationiteration', eventHandler, false)
这将允许您“向前跳转”到您的SVG动画，而不是提供回退选项。
animationstart，因为它只应该触发一次。 - F Lekschas我相信现代浏览器中的SMIL动画检测应该可以做到。https://modernizr.com/download?smil-setclasses
我正在使用它来进行一组复杂的CSS/SVG图表动画。只需在以下标签中包装一个备用方案：
.no-smil{ }
我没有做过你要的那个，但是有类似的（当浏览器支持时提供由SVG定义的动画剪辑路径，否则回退）。您可以使用媒体查询查找像素比来确定浏览器是否为moz或webkit，并在媒体查询之外提供回退动画，在指示支持它的浏览器的媒体查询中提供首选动画。
//fallback animation here
@media (-webkit-min-device-pixel-ratio: 0) {
// webkit animation here
}
至于较旧版本的Firefox？我不知道CSS该怎么做，但是我不确定回退超过几个版本的Firefox或Chrome是否是常见用例。