html - img 在 foreignObject 内部 在 svg 内部 在 img 内部

Question

这是我的测试用例。

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

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

• 如果我自己打开 svg，内部 img 渲染得很好。

• 但是当我将此 svg 设为 img 的 src 时，内部 img 未呈现。我没有收到任何错误。

• 如果我将内部 img 设为数据 url，它就会被渲染。如果可能，我想避免使用数据 URL，因为它们会使事情复杂化、有大小限制并且无法缓存。

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

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

跨源问题？

规范的限制？

浏览器错误？

Answer 1

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

所以你需要base64 encode图像并将其作为 data URL 嵌入到 SVG 中让它工作。