这是我的测试用例。
http://tobeythorn.com/isi/dummy2.svg
http://tobeythorn.com/isi/isitest.html
如果我自己打开svg，内部img就可以了。
但是当我将这个svg作为img的src时，内部img不会被渲染。我没有收到任何错误。
如果我将内部img设为data-url，它将被渲染。如果可能的话，我想避免使用数据网址，因为它们使事情变得复杂，有大小限制，并且无法缓存。
在FF，Chrome，Opera和Safari中也会发生同样的事情。
我无法找到解决方案，但可能相关：foreignObject inside second SVG element for Chrome
跨领域问题？
规格的限制？
浏览器错误？
答案 0 :(得分：4)
用作图像的所有SVG必须在单个文件中完整。图像无法加载外部数据。
因此，您需要base64 encode图片并将其作为data URL嵌入到SVG中，以使其发挥作用。
答案 1 :(得分：0)
我无法看到您的示例，但如果您使用JS将html元素附加到svg，则必须记住使用前缀告诉浏览器此元素是svg或html。
例如，如果你附加一个html img元素：
$('svg').append('svg:foreignObject').append('xhtml:img').attr('src','./foo.jpg');