img里面的外国对象svg里面的img里面 [英] img Inside a foreignObject Inside an svg Inside an img

问题描述

这是我的测试用例.

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

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

• 如果我只是单独打开svg，则内部img会很好显示.

• If I just open the svg by itself, the inner img is rendered fine.

但是当我将此svg设置为img的src时，不会呈现内部img.我没有收到错误.

But when I make this svg the src of an img, the inner img is not rendered. I receive no errors.

如果我将内部img设置为数据URL，则会对其进行渲染.如果可能的话，我想避免使用数据URL，因为它们会使事情变得复杂，具有大小限制并且不能被缓存.

If I make the inner img a data-url, it gets rendered. If possible, I would like to avoid data-urls, as they complicate things, have size limitations, and cannot be cached.

FF，Chrome，Opera和Safari中也会发生同样的事情.

The same thing happens in FF, Chrome, Opera, and Safari.

我找不到解决方案，但可能与之相关: foreignObject位于第二个内部Chrome的SVG元素

I can't find a solution, but possibly related: foreignObject inside second SVG element for Chrome

跨境问题?

对规范的限制?

浏览器错误?

推荐答案

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

All SVGs used as images must be complete in a single file. Images cannot load external data.

因此，您需要 base64编码，然后将图像作为数据URL 使其正常工作.

So you need to base64 encode the image and embed it into the SVG as a data URL to get it to work.

这篇关于img里面的外国对象svg里面的img里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！