img标签中的SVG未在firefox中加载为图像

Question

我试图使用img标签加载我的svg文件,但它不能在Firefox上运行.Chrome显示了svg.我想这样做http://www.schepers.cc/svg/blendups/embedding.html.

这是我的代码......

<img src="http://ubuntu.digitalfront.ca/ghcorp/wp-content/uploads/2014/09/hillsdale.svg" alt="" class="img-responsive" />

在Firefox中,svg根本没有显示出来.我怎样才能解决这个问题？

Answer 1

我们刚刚遇到一个SVG无法在Firefox中显示的问题.初步测试表明,如果img的祖先没有定义宽度,则会出现问题... img标签也没有内联宽度或高度定义 - 因此可能没有帮助. <div><a><img src="image.svg"/></a></div> 在这个例子中 - 给div一个宽度作为svg显示.

PS锚标签和img标签都有css定义的宽度

Answer 2

谨防！在网页上的img元素中显示 SVG并不总是有效。

\n\n

它在许多情况下有效，但在某些情况下无效，例如当 SVG 文件包含嵌入图像（图像元素）时。

\n\n

据此消息来源称：“出于安全原因，当浏览器使用 img 标签将 SVG 脚本、链接和其他类型的交互添加到您的页面时，它们将禁用 xe2\x80\x99。此外，IE9、Chrome 和 Safari 不会\xe2如果样式表规则在单独的 CSS 文件中定义，则 \x80\x99t 将样式表规则应用于 SVG。”

\n

Answer 3

我也有类似的问题，请参考下面的截图。在 Firefox 中，SVG 未加载。如果我右键单击图像并在新选项卡/窗口中打开，则它可以正常打开。

我已向标记提供了属性height="300"并从中删除了宽度。这已经为我解决了这个问题。width="150"img%age/autoCSS

我还尝试过对宽度进行硬编码，px而不是仅%在 CSS 中进行编码，效果也很好。

因此，根据我的理解，SVG需要在 Firefox 中定义height/width才能在具有高度/宽度属性的图像标签或 CSS 中正确渲染。

我希望它会有所帮助。