Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
910 views
in Technique[技术] by (71.8m points)

html - img Inside a foreignObject Inside an svg Inside an img

Here is my test case.

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

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

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

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

  • 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.

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

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

Cross-origin issue?

Limitation of the spec?

Browser bug?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...