SVG 在 Firefox 中呈现不正确

【问题标题】：SVG renders incorrectly in FirefoxSVG 在 Firefox 中呈现不正确
【发布时间】：2014-08-14 11:50:14
【问题描述】：

我第一次使用 SVG 时遇到了这个问题：

我正在为图标使用一些 SVG，一切正常 - 除了一个图标在 Windows 上的 Firefox 中呈现不正确。然而，OS X 上的 Firefox 可以很好地呈现它。

这是我在其中放置 SVG 图标的标题的匿名版本：

无论我使用上面示例中使用的 Sprite 还是为每个图标使用单独的文件，这个问题都仍然存在。

这是我遇到的渲染问题的两个屏幕截图。问题是耳机下端的那个小“凹痕”：

我们已将这些 SVG 保存在 Illustrator 中，并使用 SVG 1.1 作为导出设置。

有人能指出这里的问题吗？

【问题讨论】：

标签： firefox svg

【解决方案1】：

当我使用我的 FF (30) 版本查看示例标题时，我没有在示例标题中看到该错误。

在我看来，您看到的伪像/“凹痕”似乎是由精灵表中电话旁边的信封图标最左侧的像素列引起的。放大图片就知道了。

我所做的，为了确保不会发生这样的事情，就是不要在 spritesheet 中将图标彼此紧挨着放置。在它们之间留下几个像素的间隙。

【讨论】：

感谢您的回答！我在本地有一个不使用 spritesheet 的代码版本，并且我仍然在最新稳定的 Firefox 上的 Windows 7 中的电话图标上获得该工件。在 OS X 上，一切似乎都很好。
这很奇怪，因为我也在 Win7 上，SVG 和示例标题对我来说渲染得很好。
这确实很奇怪。到目前为止，我测试过的每台运行 Win 7 的机器（包括 Browserstack）都有这个问题。