Javascript 在SVG上的所需位置上显示点（圆）

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

这是一把小提琴：

以下是我的做法：

SVG中的所有四分之一区域都在该组中。每个区域都有一个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;
}

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

var quarterCoordinates = quarterObject.getBoundingClientRect();

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

你对如何处理这个问题有什么想法或建议吗？

试试使用.getBBox；而不是getBoundingClientRect

---

嗨，弗拉德。你问的问题不完全清楚。你能把这个问题和标题编排得更清楚一点吗？嗨，萨缪尔·刘和@Ahndwoo就是这样清楚一点的吗？我编辑了标题和描述，并添加了更多代码。你们能投票表决我的问题吗？如果一切都清楚的话，得到-1是一件微不足道的事：谢谢@Ezelev，它成功了。有些点的位置不正确，但它可以完成工作。你知道为什么吗？

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