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

时间：2016-06-01 22:42:01

标签： firefox svg transparency render coreldraw

我遇到了奇怪的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。

4 个答案:

答案 0 :(得分：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。

    8. 刷新网站并vo，它就像一个魅力。希望它能帮助那些遇到与我类似问题的人。

    修改

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

    PS：经过一些更多的试验和错误后，我发现在Corel X7中将标准文本更改为曲线会使FF在没有上述步骤的情况下正确渲染SVG图像，但它并没有改变它在Chrome和IE中正常工作的事实无论如何，即使文本在导出之前没有更改为曲线。加上FF并没有显示出具有透明度的SVG，Chrome和IE也是如此。

答案 1 :(得分：0)

应用300px或更高的宽度给出了正确的结果，如chrome和IE。

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

希望它有所帮助。

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

答案 2 :(得分：0)

您可以在文本编辑器中打开一个有效且失败的SVG文件，并找到生成的HTML中的差异。 我猜你保存它的方式或矢量和图层的放置方式有所不同。也许在图像顶部的一些透明层渲染奇怪？

答案 3 :(得分：-1)

我通过空格,

删除逗号来解决此问题
相关问题
最新问题