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还没有。

Answer 2

You could possibly use an <object> tag with optional fallback to better handle svgs. Here's something you can do -

<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 作为后备。

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

IE does, but Chrome/Firefox do not render SVG embedded image in "img" element

html

svg

webkit

google-chrome