Как сделать так, чтобы размер SVG автоматически менялся при перемещении элемента к его границе? 

Здравствуйте! <br/> Я нашел то, что нужно: <br/> <a href="https://codesandbox.io/p/sandbox/hhz3lr?file=%2Findex.js%3A22%2C4-22%2C69" rel="nofollow">https://codesandbox.io/p/sandbox/hhz3lr?file=%2Fin...</a> <br/> Однако, существует ли пример, который не использует никаких библиотек?
  • 12 марта 2025 г. 18:54
Ответы на вопрос 1 
Здравствуйте!

Да, можно создать SVG, размер которого автоматически изменяется при перемещении элементов, без использования библиотек. Основная идея заключается в том, чтобы отслеживать положение элементов в SVG и динамически изменять атрибуты `width` и `height` элемента 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 #ccc;
            cursor: move;
        }
    </style>
</head>
<body>

<svg id="svgCanvas" width="300" height="300">
    <rect id="rect" width="50" height="50" fill="blue" />
</svg>

<script>
    const svg = document.getElementById('svgCanvas');
    const rect = document.getElementById('rect');

    let offsetX, offsetY;

    rect.addEventListener('mousedown', (event) => {
        offsetX = event.offsetX;
        offsetY = event.offsetY;

        svg.addEventListener('mousemove', onMouseMove);
    });

    window.addEventListener('mouseup', () => {
        svg.removeEventListener('mousemove', onMouseMove);
    });

    function onMouseMove(event) {
        const x = event.clientX - svg.getBoundingClientRect().left - offsetX;
        const y = event.clientY - svg.getBoundingClientRect().top - offsetY;

        rect.setAttribute('x', x);
        rect.setAttribute('y', y);

        adjustSvgSize();
    }

    function adjustSvgSize() {
        const svgBoundingBox = svg.getBBox();
        const newWidth = Math.max(300, svgBoundingBox.x + svgBoundingBox.width);
        const newHeight = Math.max(300, svgBoundingBox.y + svgBoundingBox.height);

        svg.setAttribute('width', newWidth);
        svg.setAttribute('height', newHeight);
    }
</script>

</body>
</html>
```

### Объяснение кода:

1. Мы создаем элемент `<svg>`, в который добавляем прямоугольник `<rect>`.
2. В обработчике `mousedown` мы сохраняем смещение в прямоугольнике, чтобы правильно рассчитывать его положение при перетаскивании.
3. Обработчик `mousemove` отслеживает перемещение мыши и обновляет атрибуты `x` и `y` прямоугольника.
4. Функция `adjustSvgSize` вычисляет новую ширину и высоту контейнера SVG на основе границ расположенного внутри прямоугольника и устанавливает эти значения для элемента SVG.
5. Отслеживание событий мыши прекращается, когда кнопка мыши отпускается (`mouseup`).

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