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

Question

我正在玩弄 CSS-动画 SVG 元素并遇到了一个问题，即即使使用的所有技术都被某些浏览器支持，但组合并不支持，即 CSS-动画 DIV 有效，但 SVG 元素无效。我想知道是否有一种方法可以检测浏览器是否能够使用 CSS.

对 SVG 元素进行动画处理

Here is a jsFiddle 举个例子。它适用于最新版本的 Chrome、Firefox 和 Safari。但是当用例如打开它时Firefox 5 只有 div 旋转而 rect 不旋转。

Answer 1

我没有完全按照您的要求进行操作，但做了类似的操作（在浏览器支持时提供由 SVG 定义的动画剪辑路径，在浏览器不支持时回退）。您可以使用媒体查询寻找像素比率来确定浏览器是 moz 还是 webkit，并在媒体查询之外提供回退动画，并在媒体查询中提供首选动画，以指示将支持它的浏览器。

//fallback animation here

@media (-webkit-min-device-pixel-ratio: 0) {
  // webkit animation here 
}

至于旧版本的 Firefox？我不知道如何在 CSS 中执行此操作，但我不确定返回多个版本的 Firefox 或 Chrome 是一个常见的用例。

Answer 2

我相信 modernizr 中的 SMIL 动画检测应该可以做到。 https://modernizr.com/download?smil-setclasses

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

.no-smil{    }

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

Answer 3

I am wondering if there is a way to detect if a browser is capable of animating SVG elements using CSS

简单回答：是的，你可以如@jhpratt 所述。

您可以检测浏览器是否支持 CSS- 仅 CSS 的功能。 @supports CSS at 规则允许您指定依赖于浏览器对一个或多个特定 CSS 功能的支持的声明。这称为特征查询。

示例：

@supports (display: flex) {
  div {
    display: flex;
  }
}
@supports not (display: flex) {
  div {
    float: right;
  }
}

MDN Link：https://developer.mozilla.org/de/docs/Web/CSS/@supports

长答案：

您总会遇到一些 cross-browser 问题。您遇到的问题困扰着每一个Web开发者。仍然有办法解决这个浏览器支持问题：

1.您可以检查 "can I use" 的兼容性：

Link: http://caniuse.com/ 建议查找任何有问题的功能，例如动画。

2。在您的工作流程中使用自动前缀：

在自动前缀器的帮助下，您在大多数情况下不必担心使用带有 -moz-、-webkit- 等前缀的 CSS。这个小帮手可以解决问题对你来说，你甚至可以告诉一些自动前缀你想要支持哪些浏览器。

3。用户第 3 方图书馆：

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

一些大牌：

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

还有很多，随便搜一下万维网吧

4.使用 CSS 黑客检测特定浏览器：

可以使用所谓的 CSS-Hacks。它们是特定的 CSS 调用，仅适用于某些浏览器。

一些例子：

Internet Explorer/Edge 8 only: @media [=11=]screen {}

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 无法检测浏览器是否支持给定的功能。这就是为什么您在浏览器支持方面总是遇到一些困难。

希望这对您有所帮助。此致

Answer 4

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

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

这将允许您 'fall forward' 到您的 SVG 动画，而不是提供后备。

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

Detect browser support for CSS-animated SVG

css

svg

cross-browser

feature-detection