Question

我正在使用CSS - 动画SVG元素，并遇到了一个问题，即使所有使用的技术都被某些浏览器支持，但组合不是，{{1动画CSS的工作，但DIV元素没有。我想知道是否有办法检测浏览器是否能够使用SVG动画SVG个元素。

Here is a jsFiddle举个例子。它适用于最新版本的Chrome，Firefox和Safari。但是用例如打开它时Firefox 5仅CSS旋转而div没有。

Answer 1

我想知道是否有办法检测浏览器是否有能力使用CSS动画SVG元素

简单回答：是的，你可以按照@jhpratt的说法。

您可以检测浏览器是否仅支持CSS的CSS功能。 @supports CSS at-rule允许您指定依赖于浏览器对一个或多个特定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。在工作流程中使用自动修复器：

在autoprefixer的帮助下，你不必担心大部分时间都会使用带有-moz-，-webkit-等前缀的CSS。这个小帮手会为你做的伎俩，你甚至可以告诉一些autoprefixers你想支持哪些浏览器。

第3。用户第三方 - 聚会图书馆：

您可以使用许多库来检测浏览器和版本。如果您想确保您的动画可以安全使用，您可以简单地使用库中提供的动画，当然也可以在各自的网站上查看兼容性。

一些大牌：

Angular：https://angularjs.org/（使用ng-Animate）
JQuery：https://jquery.com/
Greensock：https://greensock.com/

还有更多，jsut搜索万维网。

<强> 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 {}

您可以在此处查找更多浏览器：http://browserhacks.com/

<强>结论：

可以检测特定浏览器，但是无法检测brwoser是否仅使用CSS支持给定功能。这就是为什么在浏览器支持下你总会遇到困难的原因。

希望这会有所帮助。此致

Answer 2

您可以添加一个事件监听器来检查动画迭代的完成情况，并在相应的事件处理程序中设置一个类似supportsSVGKeyFramedAnimatedProps = true的标志（如果迭代从未完成，那么它不是动画）。

elem.addEventListener('animationiteration', eventHandler, false)

这将允许您“向前”到您的SVG动画，而不是提供后备。

Answer 3

我相信现代化中的SMIL动画检测应该这样做。 https://modernizr.com/download?smil-setclasses

我在一组非常复杂的css / SVG图表动画中使用它。只需在以下标记中包含一个后备：

.no-smil{    }

http://codepen.io/msbtterswrth/pen/greWzy

Answer 4

我还没有完全找到你要找的东西，但有类似的东西（提供SVG定义的动画剪辑路径，当浏览器支持它时，并在没有时退回）。您可以使用查找像素比率的媒体查询来确定broswer是moz还是webkit，并在媒体查询之外提供后备动画，并在媒体查询中提供首选动画，以指示支持它的浏览器。

{{1}}

对于旧版本的Firefox？我不知道如何在CSS中做到这一点，但我不确定回过头几个版本的Firefox或Chrome是一个常见的用例。

检测浏览器对CSS动画SVG的支持

4 个答案: