not correctly adding the circle on the correct position in svg with viewbox?

Question

I need to add the circle in the svg dynamically. Here its adding to the svg correctly but not in the correct position. Here i create on circle inside the svg and get the x and y position by clicking on the svg to add the new circle. Its getting the clientX and clientY position correctly from the screen but the newly adding circle is not correctly adding to the correct position. I need to add the new circle on the svg on the selected position .

Here is the DEMO.

var xpos, ypos;
$("svg").click(function (e) {
    xpos = e.clientX;
    ypos = e.clientY;
    alert(xpos+' '+ypos);
});

$("#create").click(function (e) {
    var svgNS = "http://www.w3.org/2000/svg";
    var myCircle = document.createElementNS(svgNS, "circle");
    myCircle.setAttributeNS(null, "id", "mycircle");
    myCircle.setAttributeNS(null, "fill", 'blue');
    myCircle.setAttributeNS(null, "cx", xpos);
    myCircle.setAttributeNS(null, "cy", ypos);
    myCircle.setAttributeNS(null, "r", '6');
    myCircle.setAttributeNS(null, "stroke", "none");
    var svg = document.querySelector("svg");
    svg.appendChild(myCircle);
});

any suggestions should be appreciated.

Answer 1

Something like this should do it.

$("#create").click(function (e) {
    var svgNS = "http://www.w3.org/2000/svg";
    var myCircle = document.createElementNS(svgNS, "circle");
    myCircle.setAttributeNS(null, "id", "mycircle");
    myCircle.setAttributeNS(null, "fill", 'blue');
    myCircle.setAttributeNS(null, "r", '6');
    myCircle.setAttributeNS(null, "stroke", "none");
    var svg = document.querySelector("svg");
    svg.appendChild(myCircle);
    var pt = svg.createSVGPoint();
    pt.x = xpos;
    pt.y = ypos;
    var globalPoint = pt.matrixTransform(myCircle.getScreenCTM().inverse());
    var globalToLocal = myCircle.getTransformToElement(svg).inverse();
    var inObjectSpace = globalPoint.matrixTransform(globalToLocal);
    myCircle.setAttributeNS(null, "cx", inObjectSpace.x);
    myCircle.setAttributeNS(null, "cy", inObjectSpace.y);
});

This question has more details. although its solution is not quite right.