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

Question

我无法在 Firefox 中显示我的 svn-image...它在 Safari 和 Chrome（没有 IE，所以还没有测试）中工作正常。

在我的html;

中是这样实现的

img class="logo1" src="/images/logo6.svg"

其中logo1只是一个class定位。

我已经尝试 google 但刚刚发现 Firefox 不支持下垂，但仍然有办法显示它。但是，所有解决方案都非常难以理解。（我不是程序员！）

有什么简单的方法可以做到这一点吗？

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 class 中，您指定了 100%，但 100% 折扣是什么？ Chrome 正在工作，因为它默认为 "indeterminate sizing" 默认值，即 300px 宽度。但是 Firefox 使用了父元素 (<li>) 宽度的 100%，即 0

在 logo1 class 中指定实际宽度 and/or 高度，一切都应该在 FF 中正常工作。

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

Answer 3

您可以通过尝试直接在浏览器上加载 svg 来检查它是否是几何问题。如果这不是 gemoetry 问题并且 svg 本身不显示，那么您肯定想检查 svg 代码内部是否有罪魁祸首。使用 Inkscape，您可以在编辑 -> XML 编辑器下访问 XML 结构，但您可以使用您选择的文本编辑器打开 svg（未压缩）——对于复杂的 svg 文件，这可能成为一个更灵活的工具。在我的 svg 案例中，我是 "borrowing" 来自 Paper 主题的打印机符号设备，结果是我在 copy/paste 所在的图层中有一个带有“display: inline-block”，它出现在我自己的文件中。这一层 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 图像？

Can't get my svg image displayed in Firefox?

firefox

svg