Javascript SVG坐标转换

我使用SnapSVG来显示一个非常复杂的图像。图像的一部分是一个圆形，当用户单击/拖动时，我希望旋转该圆形

我整个晚上都在读关于坐标系的书，只是没有点击。我阅读并尝试修改代码，将单击的屏幕位置转换为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值毫无意义

编辑：添加了小提琴

---

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

请发布显示图像的SVG代码。正如Arif所说，我将在JSFIDLE或类似的平台上提供一个最小的测试示例。由于Snap在其处理程序中提供了x，y，所以不确定为什么需要在没有更多信息或jsfiddle的情况下执行当前正在执行的任何操作，所以需要在Snap中达到该长度是不寻常的。