2

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

这是演示。

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

任何建议都应该不胜感激。

4

2 回答 2

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

这个问题有更多细节。虽然它的解决方案并不完全正确。

于 2013-07-09T11:30:28.000 回答
1

问题来自两件事：

  1. e.clientX并且e.clientY是页面中的位置。因此与 svg 的内部并不完全相关。为了使它成为有价值的信息，让我们使用 jQuery offset。这给出了以像素为单位的以下坐标：

    var offset = $(this).offset();
xpos = e.clientX - offset.left;
ypos = e.clientY - offset.top;

  2. 另一个问题来自视口和 svg 定位相互作用的方式。事实是，根据您的设置，我们有一个框，200px*200px其中左上角为坐标 0,-100，右下角为 400,300。

    为了解决您的问题，我使用的解决方案如下：在背景中添加一个白色矩形（这样 svg 有效地使用了我们给它的所有空间）。并使用轻微的平移来调整到 svg 坐标，即

    xpos = (e.clientX - offset.left)*2;
ypos = (e.clientY - offset.top)*2 - 100;

在此处查看更新的小提琴

于 2013-07-09T11:31:47.693 回答