为什么 Firefox 显示 svg 图像错误？

Question

我遇到了一个奇怪的 Firefox 行为。它渲染 SVG 图像，剪切其中的一部分或根本不显示它们，但只显示某些图像，而不是全部。 Chrome 和 IE 正在正确显示它们。这是我在上面放置上述图片的网站的链接： funjo.pl

无法正确显示的图像是顶部菜单栏中的徽标和顶部大横幅上带有透明度的蓝色大徽标。有趣的是，同一页面上有两个图标（三个卷和女人的腿），它们也是 SVG 正在正确显示。有人可以告诉我发生了什么吗？我想 SVG 图像代码本身有问题，但我无法检测到究竟是什么。

我不会粘贴整个图像的代码，因为它太多了。您可以从http://funjo.pl/media/2016/06/logo.svg 和http://funjo.pl/media/2016/06/logo2.svg 下载这些图片。

PS：如果你真的很想让我粘贴整个代码，请告诉我。

PS2：我使用 Corel X7 在网站上创建了所有 SVG，如果这些信息有帮助的话。

PS3：我使用的是最新的 FF v 46.0.1。

Answer 1

我通过删除逗号, 和空格 解决了这个问题

Answer 2

实际上我自己找到了一个解决方案，它非常有用，但在 Corel X7 中导出 SVG 后需要更多步骤（正如我在上面的帖子中提到的，有两张图像，其中一张具有透明度）。因此，这是我为使其在 FF 中正确显示而采取的步骤（有点试错过程但有效）：

1. 我再次导出了两个 SVG，从原来透明的那个中删除了透明度，因此两个 SVG 图像都没有透明度。在菜单栏中用作徽标的那个包含所有分组的元素（徽标和文本都是分开但分组的），我将这些元素取消分组并将它们组合为一个。
2. 我从两个 SVG 中删除了 height 和 width 属性。
3. 我添加了preserveAspectRatio="none" 属性，因此我可以单独管理图像的宽度和高度，就像光栅图像一样（this CSS Tricks 文章有助于理解整个调整大小的过程）。
4. 我使用SVG Optimiser 工具从我的图像中删除所有不必要的部分并将它们缩小一点。
5. 我从上述工具的网站下载了优化的 SVG，并将它们上传到我网站的 FTP。
6. 我在 CSS 中添加了 height:(some)px 和 width:auto 属性
7. 我为应该通过 CSS 透明的那个添加了透明度 - 在本例中为 opacity:0.7。

刷新了网站，瞧，它就像一个魅力。希望它能帮助遇到和我类似问题的人。

编辑

这是要比较的图片，working 一张和 not working 一张。

PS：经过更多的尝试和错误，我发现在 Corel X7 中将标准文本更改为曲线可以使 FF 无需上述步骤即可正确渲染 SVG 图像，但这并没有改变它在 Chrome 和 IE 中正常工作的事实无论如何，即使在导出之前文本没有更改为曲线。另外，FF 根本不显示以透明方式导出的 SVG，而 Chrome 和 IE 可以。

Answer 3

您可以在文本编辑器中打开一个正常工作和失败的 SVG 文件，然后在生成的 HTML 中找到差异。 我想您保存它的方式或放置向量和图层的方式有所不同。也许图像顶部的一些透明层呈现奇怪？

Answer 4

应用 300px 或以上的宽度给了我在 chrome 和 IE 中的正确结果。

所以只要给一个宽度如下，也许你可以根据你的要求调整宽度。

希望对你有帮助。

<img style="width: 300px;" src="http://funjo.pl/media/2016/06/logo.svg" alt="Funjo">