javascript - 无法使用 viewbox 在 svg 中的正确位置正确添加圆圈？

Question

我需要在 svg 中动态添加圆圈。这里它正确添加到 svg，但位置不正确。 在这里，我在 svg 内创建圆圈，并通过单击 svg 添加新圆圈来获取 x 和 y 位置。它从屏幕正确获取 clientX 和 clientY 位置，但新添加的圆圈未正确添加到正确的位置。我需要在 svg 上的选定位置添加新圆圈。

这是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);
});

任何建议都值得赞赏。

Answer 1

类似这样的事情应该可以做到。

$("#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);
});

这个question有更多详细信息。虽然它的解决方案不太正确。