How to draw SVG element on a plane with THREE.js?
<p>I'm trying to create a copy of an existing svg element in a THREE.js scene. I use <a href="https://gist.github.com/gustavohenke/9073132" rel="nofollow">this example</a> to convert the svg to image, then I create a plane with texture based on the image and add it to a scene. However, the plane is black. If I use a solid color instead of a texture it's rendered correctly, so something's wrong with my texture.</p>

<pre><code>        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 I use the material below, it 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);
        };
</code></pre>