title: SVG draw path with onclick
body: <p>i am new to javascript and i try to draw a path with the mouseevents.
  I got 2 big problems :</p>
  
  <blockquote>
    <p>I want to create via 4 mouseclick on the fram a path. But i dont
    understand why my path look very strange. Why it do not look like the
    points of my mouse events. How can i create path who look like my
    mouse events?</p>
  </blockquote>
  
  <p>i try i t like this :</p>
  
  <pre><code>&lt;script type="text/ecmascript"&gt;
    window.onload = function () {
    };
  
      var xArry = new Array(); 
      var yArry = new Array();
      var path = document.getElementById('pathId');
  
      function clicked(evt){  
  
              xArry.push(evt.clientX);
              yArry.push(evt.clientY);
  
              if(xArry.length &lt; 4 &amp;&amp; yArry.length &lt; 4){
  
                  console.log("length x y  "+xArry[0]+" "+yArry[0]);
              }else if(xArry.length ==4 &amp;&amp; yArry.length == 4){
                  console.log(" Else if: length x y  "+xArry[0]+" "+yArry[0]);
                  drawSVG(xArry,yArry);
              }else{
                  xArry = new Array(); // x und y punkte
                  yArry = new Array();
  
              }
  
  
  
      }
  
      var drawSVG = function (xArryTmp,yArryTmp) {
          var a;
          var b;
          var c;
          var d;
          a = xArryTmp[0]+" "+yArryTmp[0];
          b = xArryTmp[1]+" "+yArryTmp[1];
          c = xArryTmp[2]+" "+yArryTmp[2];
          d = xArryTmp[3]+" "+yArryTmp[3];
          var pathTmp = "M"+a+" L"+b+" L"+c+" L"+d+" Z";
          alert(pathTmp); 
  
          var newpath = document.createElementNS('http://www.w3.org/2000/svg',"path");    
          newpath.setAttributeNS(null, "d", pathTmp);
          document.getElementById("svgid").appendChild(newpath);           
          return null;                                 
      };
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;svg id = "svgid" height="600" width="600" onclick="clicked(evt)"&gt;
    &lt;path id = "pathId" /&gt;
    &lt;rect id="rect1" width="600" height="600"
              style="stroke:#000000; fill:none;"/&gt;
  &lt;/svg&gt; 
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I got a second question. How can i integrate CSS into my javscript create path? Because i want to make the path draggable. Like this:</p>
  
  <pre><code>&lt;style&gt;
          .draggable {
              cursor: move;
          }
  &lt;/style&gt;
  </code></pre>