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

Posted 2023-03-06

【中文标题】检测浏览器对 CSS 动画 SVG 的支持

【英文标题】：Detect browser support for CSS-animated SVG

【发布时间】：2015-10-12 14:45:36

【问题描述】：

我在玩CSS-animated SVG 元素，遇到了一个问题，即使使用的所有技术都被某些浏览器支持，但组合不支持，即CSS-animated @987654327 @s 有效，但 SVG 元素无效。我想知道是否有办法检测浏览器是否能够使用CSS 为SVG 元素设置动画。

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

【问题讨论】：

您是否曾为此尝试调查Modernizr？

我还没有找到任何测试来检查 CSS 动画是否适用于 SVG。

@robjez 我也只是看了看，没有发现任何方法可以检测 CSS 动画是否也适用于 SVG。这是个好问题。 F Lekschas，你有想过这个吗？

Modernizr repo 上有一个issue。

这可能更多是关于支持转换属性的问题；

【参考方案1】：

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

//fallback animation here

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

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

【讨论】：

我的问题并不是要弄清楚如何支持一种特定的浏览器，例如 FF5。我很好奇是否有人知道一种方法来检查跨浏览器的基于 CSS 的 SVG 动画支持。

【参考方案2】：

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

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

.no-smil    

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

【讨论】：

这个问题是关于基于 CSS 的 SVG 动画而不是基于 SMIL 的动画。

我知道，但我也成功地将该测试用于 css 动画。我遇到了同样的问题，我无法让我的 svg 在某些浏览器中进行转换，而这个测试帮助我成功地检测到这些浏览器并在它们周围编写代码。

【参考方案3】：

我想知道是否有办法检测浏览器是否能够 使用 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 方库：

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

一些大牌：

Angular：https://angularjs.org/（使用 ng-Animate） jQuery: https://jquery.com/ 绿袜：https://greensock.com/

还有更多，只需搜索万维网。

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

希望这会有所帮助。 问候

【讨论】：

请注意，您绝对可以检查某个功能是否仅在 CSS 中受支持。这是@supports 规则，并得到广泛支持。

总的来说，这些都是很棒的技巧，但是你有一个具体的例子来帮助检测对 SVG 元素的 CSS 动画支持吗？

@FLekschas 你想创建一种测试来自动化你的检查吗？或者您只是想确保动画可以正常工作，如果没有其他选择？无论是什么，您都可以在这里查看：developer.mozilla.org/en-US/docs/Web/CSS/@supports#Examples

【参考方案4】：

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

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

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

【讨论】：

不知道你所说的“前退”是什么意思，因为我可能会回退到 SMIL，但这个想法很巧妙！我可能会使用animationstart，因为它只会触发一次。