如何让svg图片只在div标签内完全移动？

<div id="svg-container" style="position: relative; width: 500px; height: 500px;"></div>

<div id="svg-container" style="position: relative; width: 500px; height: 500px;">
  <svg id="svg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
    <!-- SVG内容 -->
  </svg>
</div>

const svgContainer = document.getElementById("svg-container");
const svg = document.getElementById("svg");
let isDragging = false;
let startCoords = { x: 0, y: 0 };

// 鼠标按下事件
svg.addEventListener("mousedown", (event) => {
  isDragging = true;
  startCoords = { x: event.clientX, y: event.clientY };
});

// 鼠标移动事件
svgContainer.addEventListener("mousemove", (event) => {
  if (isDragging) {
    const offsetX = event.clientX - startCoords.x;
    const offsetY = event.clientY - startCoords.y;
    startCoords = { x: event.clientX, y: event.clientY };
    
    // 获取SVG元素当前的位置
    const currentX = parseFloat(svg.getAttribute("x"));
    const currentY = parseFloat(svg.getAttribute("y"));

    // 计算新的位置
    const newX = currentX + offsetX;
    const newY = currentY + offsetY;

    // 更新SVG元素的位置
    svg.setAttribute("x", newX);
    svg.setAttribute("y", newY);
  }
});

// 鼠标松开事件
svgContainer.addEventListener("mouseup", () => {
  isDragging = false;
});