javascript - How to draw SVG element on a plane with THREE.js? -

i'm trying create copy of existing svg element in three.js scene. use this example convert svg image, create plane texture based on image , add scene. however, plane black. if use solid color instead of texture it's rendered correctly, something's wrong texture.

        var legend = document.queryselector("svg.viewlegend");         var svgdata = new xmlserializer().serializetostring(legend);          var canvas = document.createelement("canvas");         canvas.width = 512;         canvas.height = 64;         var ctx = canvas.getcontext("2d");          var img = document.createelement("img");         img.setattribute("src", "data:image/svg+xml;base64," + btoa(svgdata));          img.onload = function () {             ctx.drawimage(img, 0, 0);              var texture = new three.texture(canvas);             texture.needsupdate = true;              var material = new three.meshbasicmaterial({                 map: texture,             });             material.map.minfilter = three.linearfilter;             //if use material below, works correctly             //var material = new three.meshphongmaterial({color: 0xcc0000});             var geometry = new three.planebuffergeometry(512, 64, 1, 1);             var mesh = new three.mesh(geometry, material);              scene.add(mesh);         }; 

i believe need do:

var canvas = document.createelement("canvas"); var svgsize = svg.getboundingclientrect(); canvas.width = svgsize.width; canvas.height = svgsize.height; var ctx = canvas.getcontext("2d");  var img = document.createelement("img"); img.setattribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeuricomponent(svgdata))) );  img.onload = function() {   ctx.drawimage(img, 0, 0);    var texture = new three.texture(canvas);   texture.needsupdate = true;    var geometry = new three.spheregeometry(3, 50, 50, 0, math.pi * 2, 0, math.pi * 2);   var material = new three.meshbasicmaterial({ map: texture });   material.map.minfilter = three.linearfilter;   mesh = new three.mesh(geometry, material);   scene.add(mesh); }; 

created fiddle at: http://jsfiddle.net/3lg911vs/4/