我试图使用 "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的一个bug吗?