img 在foreignObject 内部 在svg 内部 在img 内部

Question

这是我的测试用例。

http://tobeythorn.com/isi/dummy2.svg

http://tobeythorn.com/isi/isitest.html

• 如果我只打开 svg 本身，内部的 img 就会渲染得很好。

• 但是当我将此 svg 设为 img 的 src 时，内部 img 不会渲染。我没有收到任何错误。

• 如果我将内部 img 设置为 data-url，它就会被渲染。如果可能的话，我想避免 data-urls，因为它们使事情变得复杂，有大小限制，并且无法缓存。

• 同样的事情也发生在 FF、Chrome、Opera 和 Safari 中。

我找不到解决方案，但可能相关：foreignObject inside secondary SVG element for Chrome

跨域问题？

规格的限制？

浏览器错误？

Answer 1

所有用作图像的 SVG 必须完整地保存在一个文件中。图像无法加载外部数据。

因此，您需要对图像进行 Base64 编码，并将其作为数据 URL嵌入到 SVG 中才能正常工作。