如何在某些浏览器中显示动画 svg，但在 Firefox 中显示静态 svg 或 png？

【问题标题】：How could I show animated svg in some browsers, but static svg or png in firefox?如何在某些浏览器中显示动画 svg，但在 Firefox 中显示静态 svg 或 png？
【发布时间】：2016-03-02 04:31:29
【问题描述】：

我有一个动画 svg，但 firefox 目前不支持 % 用于 svg 的 transform-origin 属性。因此，当用户在 Firefox 中查看时，我想隐藏动画 svg 并显示静态 svg 或 png。我不知道该怎么做。我不认为特征检测会起作用，因为firefox确实支持svgs和transform-origin，只是不支持svg的transform-origin。感谢您的任何建议。

【问题讨论】：

等到 12 月 15 日，Firefox 43 发布，然后支持转换原点的百分比。在撰写本文时只有 17 天。
是的，我听说过，但我担心许多用户不会更新他们的 Firefox 版本，所以问题仍然存在。

标签： firefox animation browser svg

【解决方案1】：

有这个问题。我记得在 SO 的某处读过一条评论，说 Firefox42 用前缀支持这个：

  -moz-transform-origin

无论如何，为了检测 firefox，我使用了一个找到的 sn-p here：

if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
 {
     //Do Firefox-related activities
 }

在您的情况下，如果浏览器确实是 firefox，并假设您使用 2 个容器元素，1 个用于 SVG，1 个用于 PNG，您可以：

1) 直接用js添加/显示元素

2) 将“firefox”类添加到您的根 html 元素并相应地设置您的 css 样式。

所以，假设你有一个 #svg 和 #png 容器

在你的 CSS 中你会使用：

.firefox #png { display: block; }
#png { display: none; }
#svg { display: block; }
.firefox #svg { display: none; }

希望这会有所帮助！

【讨论】：