title: Move dynamically created SVG with mouse
body: <p>I'm pretty new to HTML and JS, but I'm trying to learn some of the basics.  Now I'm experimenting with graphics.<br>
  I'm trying to create two svg elements dynamically with JS and then move them individually with the mouse.<br>
  I'm able to create them, and register the mouse events on them individually, but can't get them to move.
  To try to move there positions, in my dragging() function I assign the svg style.top and style.left to the value of the pointer.  I can confirm in the JS console that the event is sent from the SGV and that the top and left styles are changing in the element tag, but the position on screen is not changing.<br>
  I followed another example where the svg was moved with the mouse assigning style top and left with the mouse values, so I'm not sure why this isn't working.<br>
  Thanks  </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;SVG Test&lt;/title&gt;    
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Testing &lt;abbr&gt;SVG&lt;/abbr&gt;&lt;/h1&gt;
  &lt;div id="svg54583"&gt;&lt;/div&gt;
  &lt;script&gt;     
  
          // create the svg element
         var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  
          // set width and height
          svg1.setAttribute("width", "100");
          svg1.setAttribute("height", "100");
          svg1.setAttribute("id", "firstsvg");
          svg1.onmousedown = startdrag;
  
          // create a circle
          var cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
          cir1.setAttribute("cx", "80");
          cir1.setAttribute("cy", "80");
          cir1.setAttribute("r", "30");
          cir1.setAttribute("fill", "red");
  
          // attach it to the container
          svg1.appendChild(cir1);
  
          // attach container to document
          //document.getElementById("svg54583").appendChild(svg1);
          document.body.appendChild(svg1);
  
          var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  
          // set width and height
          svg1.setAttribute("width", "100");
          svg1.setAttribute("height", "100");
          svg1.setAttribute("id", "secondsvg");
          svg1.onmousedown = startdrag;
  
          // create a circle
          var cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
          cir1.setAttribute("cx", "80");
          cir1.setAttribute("cy", "80");
          cir1.setAttribute("r", "30");
          cir1.setAttribute("fill", "red");
  
          // attach it to the container
          svg1.appendChild(cir1);
  
          // attach container to document
          //document.getElementById("svg54583").appendChild(svg1);
          document.body.appendChild(svg1);
  
          function startdrag(e)
          { 
  
              var elmnt = e.target;
              elmnt.onmousemove = dragging;   
  
          }
  
          function dragging(e)
          {
              var elmnt = e.target;
              elmnt.style.top = e.clientY ;
              elmnt.style.left = e.clientX ;
              console.log(elmnt);
          }    
  
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>