Как можно центрировать прямоугольник внутри SVG с помощью JavaScript?

Question

Таис

javascript , svg

Как можно центрировать прямоугольник внутри SVG с помощью JavaScript?

Здравствуйте! <br/> Можете ли вы подсказать, как с помощью JavaScript центрировать элемент <rect> внутри SVG, используя атрибуты x и y? <br/> Также важно, чтобы была возможна функция перетаскивания. <br/>

19 марта 2025 г. 22:34

Ответы на вопрос 1

Похожие вопросы

Answer 1

Здравствуйте!

Центрирование прямоугольника внутри SVG с помощью JavaScript можно реализовать, задав значения атрибутов `x` и `y` на основе размеров самого SVG и размеров прямоугольника. Для реализации функции перетаскивания можно назначить обработчики событий для мыши.

Вот пример кода, который демонстрирует, как это сделать:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Центрирование прямоугольника в SVG</title>
    <style>
        svg {
            border: 1px solid #000;
        }
    </style>
</head>
<body>

<svg id="mySVG" width="500" height="300">
    <rect id="myRect" width="100" height="50" fill="blue" />
</svg>

<script>
    const svg = document.getElementById('mySVG');
    const rect = document.getElementById('myRect');
    
    function centerRect() {
        const svgWidth = svg.clientWidth;
        const svgHeight = svg.clientHeight;
        const rectWidth = rect.getAttribute('width');
        const rectHeight = rect.getAttribute('height');
        
        // Центрируем прямоугольник
        const x = (svgWidth - rectWidth) / 2;
        const y = (svgHeight - rectHeight) / 2;
        
        rect.setAttribute('x', x);
        rect.setAttribute('y', y);
    }
    
    // Инициализируем центрирование
    centerRect();

    // Перетаскивание
    let isDragging = false;
    let offset = { x: 0, y: 0 };

    rect.addEventListener('mousedown', (event) => {
        isDragging = true;
        offset.x = event.clientX - rect.getAttribute('x');
        offset.y = event.clientY - rect.getAttribute('y');
        rect.setAttribute('fill', 'red'); // меняем цвет при перетаскивании
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        rect.setAttribute('fill', 'blue'); // возвращаем цвет при отпускании
    });

    document.addEventListener('mousemove', (event) => {
        if (isDragging) {
            const x = event.clientX - offset.x;
            const y = event.clientY - offset.y;

            // Ограничиваем прямоугольник в пределах SVG
            const svgRect = svg.getBoundingClientRect();
            const rectWidth = rect.getAttribute('width');
            const rectHeight = rect.getAttribute('height');

            const newX = Math.max(0, Math.min(svgRect.width - rectWidth, x));
            const newY = Math.max(0, Math.min(svgRect.height - rectHeight, y));

            rect.setAttribute('x', newX);
            rect.setAttribute('y', newY);
        }
    });
</script>

</body>
</html>
```

### Как работает данный код:
1. Создается SVG элемент с прямоугольником `<rect>`.
2. Функция `centerRect` вычисляет и устанавливает значения `x` и `y`, чтобы центрировать прямоугольник в пределах SVG.
3. Для реализации перетаскивания добавлены обработчики событий `mousedown`, `mouseup` и `mousemove`, которые позволяют пользователю перетаскивать прямоугольник по SVG.
4. При перетаскивании прямоугольник меняет цвет для визуального отклика.

Также обратите внимание, что мы ограничиваем движение прямоугольника в пределах SVG, чтобы он не выходил за его границы.