html - IE 会，但 Chrome/Firefox 不会在 "img"元素中呈现 SVG 嵌入图像

Question

我正在尝试使用“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 中的错误吗？

Answer 1

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

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

FF 和 webkit 做了这个改动。我想 IE 还没有。