IE 可以，但 Chrome/Firefox 不会在“img”元素中呈现 SVG 嵌入图像答案

【问题标题】：IE does, but Chrome/Firefox do not render SVG embedded image in "img" elementIE 可以，但 Chrome/Firefox 不会在“img”元素中呈现 SVG 嵌入图像
【发布时间】：2015-03-31 21:41:18
【问题描述】：

我正在尝试使用“img”标签引用 SVG 文件：

<img width="200" height="100"
     src="test.svg" 
     onerror="this.onerror = null; alert('error');"
     />

这通常有效，但如果“test.svg”具有嵌入的 .jpg 图像，则该图像不会呈现。这在 Chrome 和 Firefox 中是正确的——IE 确实正确地呈现了图像。奇怪的是，如果我直接在浏览器中加载“test.svg”，那么嵌入的图像会在每个浏览器上正确呈现。

这是一个“test.svg”的例子，说明了我的意思：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="100">

    <!-- Text and shapes always render correctly -->
    <text x="20" y="20" font-size="20">some text</text>
    <ellipse ry="30" rx="30" 
             cy="50" cx="50" 
             stroke-width="5" stroke="#000000" 
             fill="#FF0000" 
             />

    <!-- Embedded images render in IE, but not in Chrome or Firefox -->
    <image xlink:href="test.jpg"
           width="100" height="100"
           x="100" />
</svg>

我还没有找到明确的答案。这是 Webkit 中的错误吗？

【问题讨论】：

标签： html google-chrome svg webkit

【解决方案1】：

通过<img> 标签嵌入的任何 SVG 图像都必须是独立的。它所具有的任何外部引用，例如图像、字体或 CSS 文件，都不会被加载。

这里解释了原因：https://bugzilla.mozilla.org/show_bug.cgi?id=628747

FF 和 webkit 已经做出了这个改变。我猜IE还没有。

【讨论】：

啊，谢谢。你碰巧有这方面的参考吗？我确实看过 SVG 规范，但没有找到任何效果。
如果需要，您可以将图像和其他资源作为数据 URL 嵌入。
好笑——我在想，这是一个奇迹，因为 IE 曾经是一个更好的浏览器；但不，这只是另一个安全漏洞。

【解决方案2】：

您可以使用带有可选回退的<object> 标记来更好地处理 svg。这是您可以做的事情-

<object width="200" height="100" data='test.svg' onerror="this.onerror = null; alert('error');">
    <!-- fallback -->
    <img width="200" height="100" src="test.svg" onerror="this.onerror = null; alert('error');" />
</object>

在哪里，您的对象标签将被优先加载，如果由于某种原因失败，那么您的后备标签将被加载。在这种情况下，我已将您原来的 img 写为备用。

【讨论】：