在firefox中，img标记中的SVG未加载为图像
我试图使用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" />
svg在Firefox中根本不显示。我该如何解决这个问题呢？
回答 4
Stack Overflow用户
发布于 2015-04-17 14:10:10
我们刚刚遇到了一个问题，SVG不会在Firefox中显示。初步测试表明，如果img的祖先没有定义的宽度，就会出现问题……img标记也没有内联的width或height定义-因此这可能没有帮助。本例中的<div><a><img src="image.svg"/></a></div> -给div一个宽度，使svg显示。
PS锚标记和img标记都有css定义的宽度
Stack Overflow用户
发布于 2016-06-18 03:48:45
我也有类似的问题，请参考下面的截图。在firefox中，SVG未加载。如果我右击图像并在新的选项卡/窗口中打开，它可以正常打开。
我已经向img标签提供了height="300"和width="150"属性，并从CSS中删除了%age/auto中的宽度。这为我解决了这个问题。
我也尝试过在px中硬编码宽度，而不是只在CSS中硬编码%，效果也不错。
因此，根据我的理解，SVG需要在火狐中定义一个height/width，以便在带有高度/宽度属性的图像标签上或在CSS中正确呈现。
我希望它能有所帮助。
Stack Overflow用户
发布于 2016-09-03 14:37:47
当心！在img元素中显示网页上的SVG并不总是有效的。
它在许多情况下有效，但在某些情况下不起作用，例如当SVG文件包含嵌入的图像(图像元素)时。
根据this source的说法：“出于安全原因，浏览器将禁用SVG脚本、链接和其他类型的交互性，当它们被添加到带有img标签的页面时。此外，如果IE9、Chrome和Safari是在单独的CSS文件中定义的，它们不会对SVG应用样式表规则。”
https://stackoverflow.com/questions/25927208
复制相似问题
腾讯云开发者
