SVG 动画的跨浏览器兼容性问题答案

【问题标题】：Cross Browser Compatibility Issue With SVG AnimationSVG 动画的跨浏览器兼容性问题
【发布时间】：2017-01-19 07:11:52
【问题描述】：

我想知道是否有人可以帮助我修复我的 SVG 动画，以便它可以跨浏览器运行。它似乎在 chrome 和 safari 上运行良好，但在通过 firefox 加载时被破坏。修复失败是否有办法在使用非 webkit 浏览器时显示建议使用 chrome 或 safari 的消息？我知道浏览器嗅探是不受欢迎的，我正在研究modernizr，但不知道在这种情况下要检测什么功能。

http://codepen.io/morkett/pen/VjByYj

<code>

制作这个的天才会在您使用 Firefox 时显示一条消息：

http://species-in-pieces.com/#

任何建议将不胜感激。

【问题讨论】：

在 Firefox 上看起来不错，到底是什么问题。请注意，尝试通过使用一些虚拟代码来避免将问题代码直接放在问题中只会让您的问题被否决并关闭，因此我建议您直接在问题中添加minimal reproducible example。
对不起，我是一个堆栈交换新手（代码对于一篇帖子（内联 SVG）来说太长了，并且认为它只能在 codepen 中看到）。动画在所有浏览器（虚线偏移和填充等）中都能很好地绘制出来，但它的节拍似乎与 chrome 和 safari 中的不同。与其他动画相比，Firefox 中的缩放动画（使它看起来像是在跳动）看起来非常不合适。我在 mac 上使用 Firefox 48。
如果代码太长，则将其缩小，即删除内容，直到只有显示问题的部分。我们真的不想为了帮助您而大海捞针。请注意，Chrome 有一个带有 transform-origin 的错误，因为它使用元素的尺寸而不是 viewBox 尺寸来计算原点，因此很可能是您的问题。

标签： css animation svg cross-browser modernizr

【解决方案1】：

超级简单！您可以使用此代码来探索浏览器是否为 firefox：

<script>

    var isFirefox = typeof InstallTrigger !== 'undefined';

    if (isFirefox) {
        alert('Go get chrome!');
    }

</script>

【讨论】：