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

Question

我正在尝试使用img标记加载我的svg文件，但它不能在firefox上运行。 Chrome显示了svg。我想这样做http://www.schepers.cc/svg/blendups/embedding.html。

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

svg在Firefox中根本没有显示出来。我该如何解决这个问题？

Answer 1

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

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

Answer 2

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

它适用于很多情况但不适用于某些情况，例如SVG文件包含嵌入图像（图像元素。）

根据this source：“出于安全考虑，浏览器会在使用img标记添加到您的网页时禁用SVG脚本，链接和其他类型的互动。此外，IE9，Chrome和Safari赢了如果在单独的CSS文件中定义了样式表规则，则将它们应用于SVG。“

Answer 3

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

我已将height="300"和width="150"属性提供给img代码，并从%age/auto中删除CSS中的宽度。这为我解决了这个问题。

我还尝试在CSS中对px中的宽度进行硬编码而不是%，只有这样才能正常工作。

因此，根据我的理解SVG需要在firefox中定义height/width，以便在具有高度/宽度属性的图片标记或CSS中正确呈现。

我希望它会有所帮助。