相对于鼠标点击位置获取SVG中的位置以便绘制SVG

Question

我需要一些帮助解决我遇到的问题。我有一张体图的SVG。我在浏览器中渲染了SVG。我可以通过javascript访问它的元素，我可以添加行/路径或其他元素到svg文件。

我遇到的问题是当鼠标移动到rednered SVG上时，获得相对于SVG的确切位置。

我需要得到的是能够在SVG上移动鼠标移动的地方

到目前为止，我所尝试的是

element.getBBox()

输出{x: 4129, y: 2864, width: 885.68505859375, height: 1271.2607421875}

但是它返回了元素所在的框的起始坐标，而不是我点击的确切位置。

我尝试了不太可靠的解决方案，但我不确定如何将其输出转换为SVG的坐标

element.getBoundingClientRect()

输出{x: 141.24688720703125, y: 97.97314453125, width: 30.297958374023438, height: 43.4879150390625, top: 97.97314453125, …}

我也试过使用我在这里找到的一些功能

function getElementCoords(element, coords) {
    var ctm = element.getCTM(),
        x = ctm.e + coords.x * ctm.a + coords.y * ctm.c,
        y = ctm.f + coords.x * ctm.b + coords.y * ctm.d;
    return { x: x, y: y };
}

现在这个函数还保留了其他一些内容，比如放大方程式，但是它给我带来了对我来说毫无用处的坐标。

例如<line xmlns="http://www.w3.org/2000/svg" x1="4129" y1="2864" x2="4139" y2="2874" style="stroke: red; stroke-width: 40px;"/>

我想绘制鼠标滑过SVG的位置。当我将鼠标移动到SVG文件上时，我需要知道x1, y1, x2, y2是什么。

我可以获得鼠标位置，我可以在SVG中获得框的位置，但无法获得准确的位置。

我在网上搜索过每一个地方，但找不到任何与我想要达到的目标有关的内容。任何有关解决方案的帮助或指针都表示赞赏。