데모

스크린샷

메모

마우스 이벤트 좌표를 SVG 좌표로 변환

다음 함수로 변환합니다.

function getClientPointInSVG(ev) {
  var p, m;

  p = svg.createSVGPoint();
  p.x = ev.clientX;
  p.y = ev.clientY;

  m = dragElem.getScreenCTM();
  return p.matrixTransform(m.inverse());
}

드래그 시작시 오프셋을 유지합니다.

mousedown 이벤트에서 제어점과 마우스 이벤트 점의 어긋남을 저장합니다. mousemove 이벤트에서는 그 어긋남을 유지하면서 제어점을 이동합니다.

어떤 요소에 이벤트 핸들러를 설정하는가?

mousedown : 제어점 (드래그 대상)

mousemove, mouseup: svg 요소

mousemove와 mouseup의 핸들러를 svg 요소가 아니라 제어점에 붙여 버리면, 마우스를 빠르게 움직여 제어점에서 벗어나면 드래그가 멈춰 버려 좋지 않았습니다.

참고

다음 페이지를 참고로 했습니다.

ㅋㅋ. 여기 d d d. 이 m/d 등으로 st. svg

Draggable SVG element | Peter's Website