title: javascript create use element
body: <p>I'm try to create an "use" node by using javascript, but the result cannot be seen on the screen, does anyone has any idea? By the way, creating some other type works fine, such as creating an ellipse.</p>
  
  <p>Here are the codes.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-type" content="text/html;charset=UTF-8" /&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  //this can work
  function onEllipse(){
      var ellipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
      ellipse.setAttribute("cx", "20");
      ellipse.setAttribute("cy", "40");
      ellipse.setAttribute("rx", "20");
      ellipse.setAttribute("ry", "10");
      ellipse.setAttributeNS(null,'style','visibility:visible;fill:green');
      svg.appendChild(ellipse);
  }
  
  //this **WON"T** work, the referenced node "#circle1" is alredy in the "defs"
  function onUse(){
      var xmlns = "http://www.w3.org/2000/svg";   
      var svgns = 'http://www.w3.org/2000/xlink/namespace/';
      var Node = document.createElementNS(xmlns,'use');
      Node.setAttributeNS(null,'id','abcd');
      Node.setAttributeNS(null,'x','200');
      Node.setAttributeNS(null,'y','200');
      Node.setAttributeNS(null,'style','visibility:visible;fill:green');
      Node.setAttributeNS(svgns,'xlink:href','#circle1');
      svg.appendChild(Node);
  }
  
  
  var svg;
  $(document).ready(function(){
      svg = document.getElementsByTagName('svg')[0];
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="left-toolbar" style="float:left;border:1px solid #DDDDDD;overflow:auto"&gt;
          &lt;input type='button' onclick='onEllipse()' value='ellipse' /&gt;&lt;br /&gt;
          &lt;input type='button' onclick='onUse()' value='use' /&gt;&lt;br /&gt;
      &lt;/div&gt;
  
      &lt;div id="workarea" style="float:left;border:1px solid #DDDDDD;margin:0px 20px 0px 20px;overflow:auto"&gt;
          &lt;svg width="1280px" height="720px" viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg"&gt;
              &lt;defs&gt;
                  &lt;circle id="circle1" cx="35" cy="20" r="20" style="stroke: black; fill: none;" /&gt;
              &lt;/defs&gt;
              &lt;!--use x="100" y="100" xlink:href = "#circle1"/--&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>