在Firefox中，img标签中的SVG无法作为图像加载

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" />

< p > SVG在Firefox中根本不显示。我该如何解决这个问题？< /p >

- gadss

---

我的地图.svg里面有什么？具体是什么“不起作用”？MIME类型正确吗？如果直接查看文件，您能看到图片吗？mymap.svg是没有外部依赖的单个文件吗？ - Robert Longson

它使用CSS3动画。 - gadss

我已经修改了我的描述..谢谢 - gadss

我只是在想，为什么在 Firefox 中 SVG 没有显示出来。 - gadss

完全没有显示（对我来说是有的）还是显示了但没有动画？ - Robert Longson

Answer 1

我们刚遇到一个问题，即 SVG 在 Firefox 中无法显示。初步测试表明，如果 img 的祖先元素没有定义宽度，则会出现此问题... img 标签本身也没有内联宽度或高度定义-因此可能不会有帮助。

<div><a><img src="image.svg"/></a></div>

在这个例子中，为 div 指定宽度可以使 svg 显示。

另外，锚点标签和 img 标签都有 CSS 定义的宽度。

- dj.cowan

Answer 2

注意！在 img 元素中展示网页上的 SVG 并不总是有效的。

在许多情况下它可以工作，但是有些情况下并不能，例如当 SVG 文件包含嵌入式图片 (image 元素) 时。

根据 this source： "出于安全原因，当使用 img 标记将 SVG 添加到网页时，浏览器会禁用 SVG 脚本、链接和其他类型的交互。此外，IE9、Chrome 和 Safari 不会对 SVG 应用单独定义在 CSS 文件中的样式表规则。"

- Julian - BrainAnnex.org

---

这个答案帮助我找到了我问题的答案：“为什么在img标签中使用svg时链接无法工作？”还可以在这里看看：https://stackoverflow.com/questions/11352985/can-an-svg-included-in-html-with-an-img-tag-have-a-link-to-an-external-image-w 和这里：https://stackoverflow.com/questions/12604095/security-restrictions-when-linking-to-external-stylesheet-from-svg-when-embed - undefined

Answer 3

我遇到了类似的问题，请参考下面的屏幕截图。在火狐浏览器中，SVG未能加载。当我右键点击图片并在新标签页/窗口中打开时，它会正常加载。

我已经在标签上提供了height="300" 和 width="150" 属性，并从CSS中删除了%age/auto的宽度。这样就解决了我的问题。

我还尝试过在CSS中将宽度硬编码为像素(px)，这也起作用了。

因此根据我的理解，在火狐浏览器中，SVG需要在标签或CSS中具有定义的height/width才能正确渲染。

希望这会对您有所帮助。

- Aamir Shahzad

---

在 CSS 中添加一个明确的宽度对我很有效！谢谢。 - John Harding

太棒了。很高兴知道 :) - Aamir Shahzad

Answer 4

确保 MIME 类型设置为：image/svg+xml。

- andora