SVG如何使路径的一部分可拖动/可扩展

<svg width="400" height="400">
  <path id="myPath" d="M100 100 C200 200, 300 200, 400 100" stroke="black" fill="none" />
</svg>

<script>
  var path = document.getElementById("myPath");
  var startPoint = { x: 100, y: 100 };
  var controlPoint = { x: 200, y: 200 };
  var endPoint = { x: 300, y: 200 };

  path.addEventListener("mousedown", startDrag);
  path.addEventListener("mousemove", drag);
  path.addEventListener("mouseup", endDrag);

  var isDragging = false;
  var dragStartPoint = { x: 0, y: 0 };

  function startDrag(event) {
    isDragging = true;
    dragStartPoint.x = event.clientX;
    dragStartPoint.y = event.clientY;
  }

  function drag(event) {
    if (isDragging) {
      var offsetX = event.clientX - dragStartPoint.x;
      var offsetY = event.clientY - dragStartPoint.y;

      startPoint.x += offsetX;
      startPoint.y += offsetY;
      controlPoint.x += offsetX;
      controlPoint.y += offsetY;
      endPoint.x += offsetX;
      endPoint.y += offsetY;

      path.setAttribute("d", "M" + startPoint.x + " " + startPoint.y + " C" + controlPoint.x + " " + controlPoint.y + ", " + endPoint.x + " " + endPoint.y + ", 400 100");

      dragStartPoint.x = event.clientX;
      dragStartPoint.y = event.clientY;
    }
  }

  function endDrag() {
    isDragging = false;
  }
</script>