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有更多详情。虽然它的解决方案不太正确。

Answer 2

问题来自两件事：

e.clientX和e.clientY是页面中的位置。因此与svg的内部并不完全相关。为了使其成为有价值的信息，让我们使用jQuery offset。这给出了以下像素坐标：
```
var offset = $(this).offset();
xpos = e.clientX - offset.left;
ypos = e.clientY - offset.top;
```
另一个问题来自viewport和svg定位的交互方式。事实是，在您的设置中，我们有一个200px*200px的框，其中左上角为坐标0，-100，右下角为400,300。

为了解决您的问题，我使用的解决方案如下：在后台添加一个白色矩形（这样svg就可以有效地使用我们提供的所有空间）。并使用轻微的平移来调整svg坐标，即
```
xpos = (e.clientX - offset.left)*2;
ypos = (e.clientY - offset.top)*2 - 100;
```

查看更新的小提琴here

没有正确地在svg中使用viewbox在正确位置添加圆圈？

2 个答案: