Question

我无法在Firefox中显示我的svn-image ...它在Safari和Chrome中运行良好（没有IE，所以尚未测试）。

它在我的html中实现如下;

img class =“logo1”src =“/ images / logo6.svg”

logo1只是一个定位类。

我曾试图谷歌，但刚刚发现Firefox不支持sag，但是，有很多方法可以显示它。但是，所有解决方案都很难理解。（我不是程序员！）

有没有简单的方法可以做到这一点？

Answer 1

Firefox支持svg。您可以使用此HTML代码，它将在Firefox中运行。

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg>

如果您将提供完整的代码和文件，我会为您纠正。

Answer 2

您无法在任何地方指定SVG的大小。在logo1课程中，您指定的是100％，但100％的折扣是什么？ Chrome正在运行，因为它违反了＆＃34;不确定的大小＆＃34;默认值为300px宽度。但Firefox使用父元素（<li>）的100％宽度，即0

在logo1课程中指定实际宽度和/或高度，所有内容都应在FF中正常工作。

.logo1 {
    padding-top: 6px;
    width: 300px;
}

Answer 3

您可以尝试直接在浏览器上加载svg来检查是否存在几何问题。如果它不是gemoetry问题并且svg本身不显示，那么你肯定想在svg代码中检查culprits。使用Inkscape，您可以访问Edit - ＆gt;下的XML结构。 XML编辑器，但您可以使用您选择的文本编辑器打开svg（未压缩） - 对于复杂的svg文件，这可能是一个更灵活的工具。在我的案例的svg中，我从Paper主题中“借用”了一个打印机符号设备，并且我在其中复制/粘贴的图层中显示了一个带有“Entry”的样式属性，进入我自己的档案。这层Chrome可以渲染得很好，但Firefox不会显示它。我删除了style属性和violá！有图标。

Answer 4

我遇到了Firefox（v58.0.2）的渲染问题，其中display: flex作为SVG的父级导致了问题，例如：

<div style="width: 50px; display: flex">
  <span class="Icon">
    <svg>
      <use xlink:href="#myicon" href="#myicon"></use>
    </svg>
  </span>
</div>

删除父div中的display: flex样式有助于解决问题。

无法在Firefox中显示我的svg图像？

4 个答案: