当前位置：首页 > JavaScript

js实现拖动svg

2026-04-07 15:06:54JavaScript

实现 SVG 拖动的 JavaScript 方法

使用原生 JavaScript 实现 SVG 拖动

为 SVG 元素添加拖动功能需要监听鼠标事件（mousedown、mousemove、mouseup）。以下是一个基本实现：

js实现拖动svg

const svgElement = document.getElementById('draggable-svg');
let isDragging = false;
let offsetX, offsetY;

svgElement.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - svgElement.getBoundingClientRect().left;
    offsetY = e.clientY - svgElement.getBoundingClientRect().top;
    svgElement.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    svgElement.style.left = `${e.clientX - offsetX}px`;
    svgElement.style.top = `${e.clientY - offsetY}px`;
});

document.addEventListener('mouseup', () => {
    isDragging = false;
    svgElement.style.cursor = 'grab';
});

使用 transform 优化性能

直接修改 left 和 top 可能触发重排，使用 transform 性能更好：

js实现拖动svg

svgElement.addEventListener('mousedown', (e) => {
    isDragging = true;
    const rect = svgElement.getBoundingClientRect();
    offsetX = e.clientX - rect.left;
    offsetY = e.clientY - rect.top;
});

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    svgElement.style.transform = `translate(${e.clientX - offsetX}px, ${e.clientY - offsetY}px)`;
});

处理 SVG 内部元素拖动

若需拖动 SVG 内的特定元素（如 <rect> 或 <circle>），需使用 SVG 的坐标系统：

const svg = document.querySelector('svg');
const rect = document.querySelector('rect');
let selectedElement = null;
let offset = { x: 0, y: 0 };

svg.addEventListener('mousedown', (e) => {
    if (e.target !== rect) return;
    selectedElement = e.target;
    const CTM = svg.getScreenCTM();
    offset.x = e.clientX - CTM.e - parseFloat(selectedElement.getAttribute('x'));
    offset.y = e.clientY - CTM.f - parseFloat(selectedElement.getAttribute('y'));
});

svg.addEventListener('mousemove', (e) => {
    if (!selectedElement) return;
    const CTM = svg.getScreenCTM();
    const x = e.clientX - CTM.e - offset.x;
    const y = e.clientY - CTM.f - offset.y;
    selectedElement.setAttribute('x', x);
    selectedElement.setAttribute('y', y);
});

svg.addEventListener('mouseup', () => {
    selectedElement = null;
});

使用第三方库简化操作

若项目允许，使用库如 Draggable 或 interact.js 可简化实现：

interact('.draggable-svg')
    .draggable({
        onmove: (event) => {
            const target = event.target;
            const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
            const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
            target.style.transform = `translate(${x}px, ${y}px)`;
            target.setAttribute('data-x', x);
            target.setAttribute('data-y', y);
        }
    });