title: How to draw SVG element on a plane with THREE.js?
body: <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>