在SVG上的指定位置显示一个点（圆）[关闭]

Question

关闭。这个问题是off-topic。它当前不接受答案。

---

是否要改善此问题？ Update the question，因此堆栈溢出为on-topic。

关闭6小时前。

我有一个12小时制的时钟，有47个四分之一区域（12小时*一小时内有4个季度）。我想根据后端的响应在时钟的定义的四分之一区域上显示一个点。假设后端返回我3，我必须在第三个四分之一区域显示一个点。

这里是小提琴：jsfiddle

这里是我的方法：

SVG中的所有四分之一区域都在组<g id="data"></g>中。每个区域都有一个ID。之后，我想确定他的SVG位置，然后在该位置上加一个点：

function setPointForQuarterCoordonates(id) {
    var quarterObject = document.getElementById(id);
    var coordinates   = quarterObject.getBoundingClientRect();
    var point         = document.createElementNS(NS, 'circle');
    point.setAttributeNS(null, 'cx', coordinates.x);
    point.setAttributeNS(null, 'cy', coordinates.y);
    point.setAttributeNS(null, 'r', 10);

    return point;
}

在我的示例中，按钮“显示定义的点（3）”通过从12:00开始在第三个矩形上添加一个点来模拟此事件。为此，我使用了：

var quarterCoordinates = quarterObject.getBoundingClientRect();

但是问题是，这给了我DOM坐标，而不是SVG坐标。因此，如果我调整窗口大小并第二次单击按钮，则该点将添加到其他位置，而不是同一位置。

您对如何处理有任何想法或建议吗？

Answer 1

尝试使用.getBBox();代替getBoundingClientRect();。

function setPointForQuarterCoordonates(id) {

    var quarterObject = document.getElementById(id);
    var coordinates   = quarterObject.getBBox(); // <------------------
    var point         = document.createElementNS(NS, 'circle');
    point.setAttributeNS(null, 'cx', coordinates.x);
    point.setAttributeNS(null, 'cy', coordinates.y);
    point.setAttributeNS(null, 'r', 10);

    return point;
}

https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox