SVG draw path with onclick
<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>