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

我有一个动画svg，但firefox目前不支持带有%的transform origin属性。因此，我想隐藏动画svg，并在用户在firefox中查看时显示静态svg或png。我不知道该怎么做。我认为功能检测不起作用，因为firefox确实支持svg和transform origin，只是不支持svg的transform origin。谢谢你的建议。

有这个问题。我记得在中的某个地方读到一条评论，因此Firefox42用前缀支持这一点：

  -moz-transform-origin

无论如何，要检测firefox，我使用找到的代码片段：

在您的情况下，如果浏览器确实是firefox，并且假设您使用了两个容器元素，一个用于SVG，一个用于PNG，那么您可以：

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

2） 向根html元素添加一个“firefox”类，并相应地设置css的样式

那么，假设您有一个#svg和#png容器

在css中，您将使用：

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

---

希望这有帮助

等到12月15日，Firefox43发布后支持transform origin的百分比。写这篇文章的时候，离这只剩下17天了。是的，我听说过，但我担心的是，很多用户不会更新他们的Firefox版本，所以这个问题仍然会存在。

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