SVG draw path with onclick

Question

i am new to javascript and i try to draw a path with the mouseevents. I got 2 big problems :

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?

i try it like this :

<script type="text/ecmascript">
  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 < 4 && yArry.length < 4){

                console.log("length x y  "+xArry[0]+" "+yArry[0]);
            }else if(xArry.length ==4 && 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;                                 
    };


</script>
</head>
<body>

 <svg id = "svgid" height="600" width="600" onclick="clicked(evt)">
  <path id = "pathId" />
  <rect id="rect1" width="600" height="600"
            style="stroke:#000000; fill:none;"/>
</svg> 



</body>
</html>

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:

<style>
        .draggable {
            cursor: move;
        }
</style>

Answer 1

The clientX and clientY coordinates are browser window coordinates. You need to convert them to svg coordinates. The getScreenCTM() function returns a transform matrix to convert svg coordinates to window coordinates. Use the inverse of this matrix to convert from window coordinates to svg coordinates.

In your example in the click function, you could replace...

xArry.push(evt.clientX);
yArry.push(evt.clientY);

with...

var svg = document.getElementById("svgid");
var point = svg.createSVGPoint();
point.x = evt.clientX;
point.y = evt.clientY;
point = point.matrixTransform(svg.getScreenCTM().inverse());
xArry.push(point.x);
yArry.push(point.y);

To use your draggable style, you need to set the class attribute. In your example in the drawSVG function, you could add...

newpath.setAttributeNS(null, "class", "draggable");

SVG draw path with onclick

Question

1 answers

solution1
0 ACCPTED 2016-05-19 11:30:48

SVG draw path with onclick

Question

1 answers

solution1 0 ACCPTED 2016-05-19 11:30:48

solution1
0 ACCPTED 2016-05-19 11:30:48