Image in a SVG texture that is linking to an “object URL” does not work. Probably a CORS issue?
Here is a Playground sample for the issue: Babylon.js Playground
You should simply pass the string data to href
and not the result of createObjectUrl
:
https://playground.babylonjs.com/#AYFECP#1
Note: you should check first that copying/pasting the value of url
in the adress bar of a browser produces the desired result. If that does not work (as it is the case with your PG), it can’t work in Babylon neither.
The problem is that I have really large photos and placing them in SVG as data urls is memory intensive, better keep them around as object urls (makes sense I hope).
The sample I uploaded shows that the object URL itself can be used as a texture image but NOT when linking from within a SVG.
Sorry, did not see in your PG that you already tested this possibility…
It seems linking to a picture does not work either:
https://playground.babylonjs.com/#AYFECP#3
Maybe there are some constraints when using data uri that prevent using external references…
[…] It seems it is the reason why it does not work: html - svg in data uri not rendered - Stack Overflow