为什么 Firefox 显示 svg 图像错误？
Why is Firefox displaying svg images wrong?
我遇到了一个奇怪的 Firefox 行为。它渲染 SVG 图像，切割其中的一部分或根本不显示它们，但只显示某些图像，而不是全部图像。 Chrome 和 IE 正在正确显示它们。这是我在上面放图片的网站的 link：
funjo.pl
未正确显示的图像是顶部菜单栏中的徽标和顶部大横幅上透明的蓝色大徽标。有趣的是，同一页面上的两个图标（三卷和女人的腿），也是 SVG 被正确显示。有人可以告诉我发生了什么事吗？我想 SVG 图像代码本身有问题，但我无法检测到具体问题。
我不会粘贴整个图像的代码，因为它太多了。您可以从 http://funjo.pl/media/2016/06/logo.svg and http://funjo.pl/media/2016/06/logo2.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 后需要更多步骤（正如我在上面的 post 中提到的，有两张图片，其中一张是透明的).因此，这是我为使其在 FF 中正确显示而采取的步骤（有点反复试验但有效）：
- 我再次导出了两个 SVG，从原来透明的那个移除了透明度，所以两个 SVG 图像都没有透明度。在菜单栏中用作徽标的那个包含所有分组的元素（徽标和文本都是分开的但分组了），我将这些元素取消分组并将它们作为一个元素。
- 我从两个 SVG 中删除了
height 和 width 属性。
- 我添加了
preserveAspectRatio="none" 属性，这样我就可以分别管理图像的宽度和高度，就像光栅图像一样（this CSS Tricks 这篇文章对理解整个调整大小的过程有很大帮助）。
- 我使用 SVG Optimiser 工具从我的图像中删除了所有不必要的部分并将它们缩小了一点。
- 我从上述工具的网站下载了优化的 SVG，并将它们上传到我的网站 FTP。
- 我在 CSS
中添加了 height:(some)px 和 width:auto 属性
- 我为应该通过 CSS 透明的那个添加了透明度 - 在这种情况下为
opacity:0.7。
刷新了网站，瞧，它就像一个魅力。希望它能帮助和我有类似问题的人。
编辑
这里有要比较的图片，working one and not working 一张。
PS：经过更多的试验和错误后，我发现在 Corel X7 中将标准文本更改为曲线可以使 FF 在没有上述步骤的情况下正确渲染 SVG 图像，但这并没有改变它的事实即使文本在导出前未更改为曲线，在 Chrome 和 IE 中也能正常工作。另外 FF 根本不显示以透明方式导出的 SVG，Chrome 和 IE 显示。
我通过用空格 </code></p> 删除逗号 <code>, 解决了这个问题
我遇到了一个奇怪的 Firefox 行为。它渲染 SVG 图像，切割其中的一部分或根本不显示它们，但只显示某些图像，而不是全部图像。 Chrome 和 IE 正在正确显示它们。这是我在上面放图片的网站的 link： funjo.pl
未正确显示的图像是顶部菜单栏中的徽标和顶部大横幅上透明的蓝色大徽标。有趣的是，同一页面上的两个图标（三卷和女人的腿），也是 SVG 被正确显示。有人可以告诉我发生了什么事吗？我想 SVG 图像代码本身有问题，但我无法检测到具体问题。
我不会粘贴整个图像的代码，因为它太多了。您可以从 http://funjo.pl/media/2016/06/logo.svg and http://funjo.pl/media/2016/06/logo2.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 后需要更多步骤（正如我在上面的 post 中提到的，有两张图片，其中一张是透明的).因此，这是我为使其在 FF 中正确显示而采取的步骤（有点反复试验但有效）：
- 我再次导出了两个 SVG，从原来透明的那个移除了透明度，所以两个 SVG 图像都没有透明度。在菜单栏中用作徽标的那个包含所有分组的元素（徽标和文本都是分开的但分组了），我将这些元素取消分组并将它们作为一个元素。
- 我从两个 SVG 中删除了
height和width属性。 - 我添加了
preserveAspectRatio="none"属性，这样我就可以分别管理图像的宽度和高度，就像光栅图像一样（this CSS Tricks 这篇文章对理解整个调整大小的过程有很大帮助）。 - 我使用 SVG Optimiser 工具从我的图像中删除了所有不必要的部分并将它们缩小了一点。
- 我从上述工具的网站下载了优化的 SVG，并将它们上传到我的网站 FTP。
- 我在 CSS 中添加了
- 我为应该通过 CSS 透明的那个添加了透明度 - 在这种情况下为
opacity:0.7。
height:(some)px 和 width:auto 属性
刷新了网站，瞧，它就像一个魅力。希望它能帮助和我有类似问题的人。
编辑
这里有要比较的图片，working one and not working 一张。
PS：经过更多的试验和错误后，我发现在 Corel X7 中将标准文本更改为曲线可以使 FF 在没有上述步骤的情况下正确渲染 SVG 图像，但这并没有改变它的事实即使文本在导出前未更改为曲线，在 Chrome 和 IE 中也能正常工作。另外 FF 根本不显示以透明方式导出的 SVG，Chrome 和 IE 显示。
我通过用空格 </code></p> 删除逗号 <code>, 解决了这个问题