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

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

未正确显示的图像包括顶部菜单栏中的徽标和顶部横幅上透明的蓝色大徽标。有趣的是，在同一页面上有两个稍微向下的图标（三个滚动和女人的腿），它们也是SVG正在正确显示。有人能告诉我发生了什么事吗？我想SVG图像代码本身可能有问题，但我无法检测到底是什么

我不会粘贴整个图像的代码，因为它太多了。您可以从和下载这些图像

PS：如果你真的非常希望我粘贴整个代码，请告诉我

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

---

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

应用300px或更高的宽度，得到了与chrome和IE相同的正确结果

因此，只需给出如下宽度，您可能可以根据您的要求调整宽度

希望能有帮助

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

---

您可以在文本编辑器中打开一个正常工作和出现故障的SVG文件，并在生成的HTML中找到差异。

---

我想你保存它的方式或者向量和图层的放置方式是不同的。可能是图像顶部的某个透明层呈现出奇怪的效果？

事实上，我自己也找到了一个解决方案，它非常有用，但在Corel X7中导出SVG后还需要几个步骤（正如我在上面的帖子中提到的，有两个图像，其中一个是透明的）。下面是我为使其在FF中正确显示所做的步骤（一个位尝试和错误程序，但有效）：

我再次导出了两个SVG，从原来透明的SVG中删除了透明度，因此两个SVG图像中都没有透明度。在菜单栏中用作徽标的那个包含了所有分组的元素（徽标和文本都是单独的，但都是分组的），我将这些元素解组并将它们作为一个整体

我从两个SVG中删除了

height

和

width

属性

我添加了

preserveSpectratio=“none”

属性，这样我就可以像光栅图像一样单独管理图像的宽度和高度（这篇文章对理解整个调整大小过程有很大帮助）

我使用这个工具从我的图像中删除了所有不必要的部分，并将它们缩小了一点

我从上述工具的网站下载了优化的SVG，并将其上传到我网站的FTP

我在CSS中添加了

height:（一些）px

和

width:auto

属性

我添加了一个透明度，在本例中，它应该是通过CSS透明的-

opacity:0.7

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

编辑 下面是要比较的图片，一张一张

---

PS：经过更多的尝试和错误后，我发现在Corel X7中将标准文本更改为曲线可以使FF在不执行上述步骤的情况下正确地渲染SVG图像，但这不会改变它在Chrome和IE中正常工作的事实，即使文本在导出之前没有更改为曲线。另外，FF根本没有显示导出的SVG，Chrome和IE显示了。我通过删除逗号解决了这个问题，通过空格

，

，，

是的，请包含一个复制这个问题的最小演示。只是一个猜测，但您的路径中使用的值非常大。也许您已经超过了整数的安全大小？实际上它只起到了一定的作用，并不是解决我问题的正确方法，无论如何，谢谢您的努力。顺便说一句，我在回答我自己的问题时把整个过程都理清了；）非工作图像和工作图像之间到底有什么区别？这里是否存在一些Firefox bug，您可以将其缩小到特定的原因？我不知道是否存在FF bug（找不到任何相关信息）或Corel X7 SVG导出bug，我将发布工作图像和不工作图像之间的差异。问题中链接的文件不包含任何逗号