Snap SVG拖动旋转跳跃

Question

我有这个简单的SVG旋钮，我使用Snap SVG旋转。当我单击旋钮并拖动一个像素时，它会跳转到任意角度。在进行初始跳转后，它表现良好。

以下是行为示例：

以下是当前代码：

https://jsfiddle.net/yepher/w14hqtnc/

的JavaScript

var s = Snap("#knobCanvas");

Snap.select('#knobCanvas-knobGroup').drag(dragRotate, dragRotateStart)

function dragRotate(dx, dy, x, y) {
  this.transform('r' + Snap.angle(this.getBBox().cx, this.getBBox().cy, dx + this.data('oxy').x, dy + this.data('oxy').y));
}

function dragRotateStart(x, y) {
  this.data('oxy', {
    x: x,
    y: y
  })
}

旋转SVG

<?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="222" height="149" xml:space="preserve" id="knobCanvas">
    <!-- Generated by PaintCode - http://www.paintcodeapp.com -->
    <g id="knobCanvas-knobGroup">
      <path id="knobCanvas-knobPath" stroke="none" fill="rgb(146, 146, 146)" d="M 12.88,-58.93 C 10.68,-58.93 8.89,-57.18 8.89,-55.01 8.89,-52.85 10.68,-51.1 12.88,-51.1 14.28,-51.1 15.52,-51.81 16.23,-52.89 16.64,-53.5 16.87,-54.23 16.87,-55.01 16.87,-57.18 15.08,-58.93 12.88,-58.93 Z M 64.75,-0.25 C 64.75,36.48 34.98,66.25 -1.75,66.25 -38.48,66.25 -68.25,36.48 -68.25,-0.25 -68.25,-36.98 -38.48,-66.75 -1.75,-66.75 34.98,-66.75 64.75,-36.98 64.75,-0.25 Z M 64.75,-0.25"
      transform="translate(68.25, 66.75)" />
    </g>
    <g id="knobCanvas-overlayGroup">
      <path id="knobCanvas-yAsix" stroke="rgb(255, 108, 108)" stroke-opacity="0.51" stroke-width="0.5" stroke-miterlimit="10" stroke-dasharray="2,2" stroke-dashoffset="0" fill="rgb(255, 108, 108)" fill-opacity="0.51" d="M 67.73,-1.5 L 67.73,143.5" />
      <path id="knobCanvas-xAxis" stroke="rgb(255, 108, 108)" stroke-opacity="0.51" stroke-width="0.5" stroke-miterlimit="10" stroke-dasharray="2,2" stroke-dashoffset="0" fill="none" d="M -20.5,66.47 L 153.5,66.47" />
      <path id="knobCanvas-bezier" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-miterlimit="10" fill="none" d="M 82.43,18.89" />
      <path id="knobCanvas-bezier2" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-miterlimit="10" fill="none" d="M 84.88,16.62" />
      <path id="knobCanvas-bezier3" stroke="rgb(255, 108, 108)" stroke-opacity="0.51" stroke-width="0.5" stroke-miterlimit="10" stroke-dasharray="2,2" stroke-dashoffset="0" fill="rgb(255, 108, 108)" fill-opacity="0.51" d="M 68.25,66.75 L 86.25,-0.75" />
    </g>
  </svg>

每次点击旋钮时，如何保持git摆脱初始跳转？