SVG协调转换

Question

我正在使用SnapSVG来显示非常复杂的图像。当用户进行单击/拖动时，图像的一部分是我想要旋转的圆圈。

我整个晚上都在阅读有关坐标系统的内容，而且它并没有点击。我阅读this page并尝试调整代码以将点击的屏幕位置转换为我的SVG坐标。

以下是我尝试的代码......

function dragStart(x, y, event) {
    var inverse = event.srcElement.getScreenCTM().inverse();
    var point = svg.createSVGPoint();
    point.x = event.clientX;
    point.y = event.clientY;
    var final = point.matrixTransform(inverse);
    console.log('Before: (' + point.x + ', ' + point.y + ')');
    console.log('Final: (' + final.x + ', ' + final.y + ')');
}

奇怪的是，X值正好与我期望的一样。但Y值完全没有意义。

编辑：小提琴添加了here

我已将SVG剥离到最低限度。黑色外圈是静止的。当用户点击并拖动时，白色内圈将旋转。创建SVG时，环的中心位于（0,0），SVG的宽度和高度为600.打开浏览器的开发人员工具控制台，然后单击图像。如您所见，当您单击靠近红色圆圈的中心时，x坐标将按预期接近零。但是Y值很远。