Three.js: SVG as texture?

[Dino4674]

I red this question #814

And also I run onto this js library: http://code.google.com/p/canvg/ which can do SVG to canvas to data conversion.

This is my code:

var imageCanvas2 = document.createElement("canvas");
canvg(imageCanvas2, 'images/46.svg');
var imag = imageCanvas2.toDataURL('image/png');   // --> here is the converted image data

var cubeMaterial = [new THREE.MeshBasicMaterial({
    map : THREE.ImageUtils.loadTexture(imag)
})];

This gives me error: "Cross-origin image load denied by Cross-Origin Resource Sharing policy."

What are my options here?

Also I should mention that WebGL is not an option since I will be using this on mobile devices which don't support WebGL.

[mrdoob]

I think you're hitting this same issue #1305.

[Dino4674]

I tried something based on that:

var imageCanvas2 = document.createElement("canvas");
canvg(imageCanvas2, 'images/46.svg');
var imag = imageCanvas2.toDataURL('image/png');

var texture = new THREE.Texture(imag);
texture.needsUpdate = true;

//Now I have to make material from this so I could apply it to Mesh:

var cubeMaterial = new THREE.MeshBasicMaterial({
    map : texture  /////something like this. This throws errors.
});

cube = new THREE.Mesh(geometry, cubeMaterial);

I didn't find example of this. Can you help?

[mrdoob]

var imageCanvas2 = document.createElement("canvas");
canvg(imageCanvas2, 'images/46.svg');

var texture = new THREE.Texture(imageCanvas2);
texture.needsUpdate = true;

[Dino4674]

Well, good thing is that this works. Bad thing is that it doesn't work on iPhone.
Thank you, I'll have to figure now why isn't this working on iOS.

[Dino4674]

My god... I can't believe how stupid.
This works on iOS also.

I have an SVG image which is the same color as WebView's background so that is why I didin't saw it :D
At least it works and someone can laugh now when reads this :D