如何无需外部库实现<svg>元素的缩放与滚动功能

我是HTML/CSS/JS开发新手，出于爱好学习相关技术。我尝试在<div>中嵌入<svg>元素，希望不借助外部库实现其内容的滚动平移与缩放功能（以便理解底层机制）。

我编写了带有缩放按钮的页面代码，其中用<rect>绘制了一个蓝色矩形。代码大致可用，但放大后出现滚动条时，拖动滚动条无法看到完整的矩形，内容似乎被视口裁剪。

我也尝试过调整<svg>的viewBox属性，但可能并未完全理解其用法，或许这是正确的解决方向……

请问如何修改这段代码，以稳健优雅地实现我想要的效果？

原代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #container {
            width: 80lvw;
            height: 80lvh;
            border: 1px solid black;
            justify-content:left;
            overflow: auto;
            --scale-k: 1;
        }

        #svg {
            transform: scale(var(--scale-k));
            transform-origin: center;
        }
    </style>

    <script>

    </script>
</head>

<body>
    <div id="container">
        <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" height="100%" width="100%" stroke="black"
            stroke-width="3" fill="transparent">
            <rect x="100" y="100" width="100" height="100" fill="blue" rx="20" ry="20" />
        </svg>
    </div>
    <button type="button" id="zoom-in" style="z-index: 100000">zoom in</button>
    <button type="button" id="zoom-out" style="z-index: 100000">zoom out</button>
</body>

<script>

    const container = document.querySelector('#container');
    const svg = document.querySelector('#svg');

    let zoomF = window.getComputedStyle(container).getPropertyValue('--scale-k');
    console.log(zoomF);

    const btnZoomIn = document.querySelector('#zoom-in');
    const btnZoomOut = document.querySelector('#zoom-out');

    btnZoomIn.addEventListener('click', (evt) => {
        zoomF *= 1.1;
        resize();
    });

    btnZoomOut.addEventListener('click', (evt) => {
        zoomF /= 1.1;
        resize();
    });

    function resize() {
        let svgWidth = parseInt(svg.getAttribute('width'));
        svg.setAttribute('width', `${(svgWidth * zoomF)}%`);
        let svgHeight = parseInt(svg.getAttribute('height'));
        svg.setAttribute('height', `${(svgHeight * zoomF)}%`);
        container.style.setProperty('--scale-k', zoomF);
    }


</script>

</html>

核心问题是用CSS transform: scale()缩放SVG时，SVG的布局尺寸并未实际改变——容器的滚动条基于SVG原始布局尺寸计算，缩放后的内容超出视口但无法通过滚动完全显示。viewBox确实是正确方向，它定义了SVG内部的坐标系统范围，配合width/height能实现正确的缩放与滚动行为。以下是修改后的代码，同时加入了鼠标拖拽平移功能：

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Zoom & Pan</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #container {
            width: 80lvw;
            height: 80lvh;
            border: 1px solid black;
            overflow: auto;
            position: relative;
        }

        #svg {
            display: block; /* 消除SVG默认行内元素间距 */
            cursor: grab;
        }

        #svg:active {
            cursor: grabbing;
        }

        .zoom-controls {
            position: fixed;
            top: 1rem;
            left: 1rem;
            z-index: 100;
            gap: 0.5rem;
            display: flex;
        }

        button {
            padding: 0.5rem 1rem;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="container">
        <svg id="svg" xmlns="http://www.w3.org/2000/svg" 
             viewBox="0 0 300 300" <!-- 初始坐标范围：覆盖矩形及周围空间 -->
             width="300" height="300" <!-- SVG初始布局尺寸 -->
             stroke="black" stroke-width="3" fill="transparent">
            <rect x="100" y="100" width="100" height="100" fill="blue" rx="20" ry="20" />
        </svg>
    </div>
    <div class="zoom-controls">
        <button id="zoom-in">Zoom In</button>
        <button id="zoom-out">Zoom Out</button>
    </div>

    <script>
        const container = document.getElementById('container');
        const svg = document.getElementById('svg');
        const zoomInBtn = document.getElementById('zoom-in');
        const zoomOutBtn = document.getElementById('zoom-out');

        // 初始缩放比例
        let scale = 1;
        // SVG原始viewBox参数：[minX, minY, width, height]
        const originalViewBox = [0, 0, 300, 300];
        // 拖拽相关变量
        let isDragging = false;
        let startPos = { x: 0, y: 0 };
        let viewBoxOffset = { x: 0, y: 0 };

        // 更新SVG的viewBox实现缩放和平移
        function updateViewBox() {
            const [minX, minY, width, height] = originalViewBox;
            // 计算缩放后的viewBox：偏移量 + 原始尺寸/缩放比例
            const newViewBox = [
                viewBoxOffset.x,
                viewBoxOffset.y,
                width / scale,
                height / scale
            ];
            svg.setAttribute('viewBox', newViewBox.join(' '));
        }

        // 缩放按钮事件
        zoomInBtn.addEventListener('click', () => {
            scale *= 1.1;
            updateViewBox();
        });

        zoomOutBtn.addEventListener('click', () => {
            // 限制最小缩放比例，避免内容过小
            if (scale > 0.2) {
                scale /= 1.1;
                updateViewBox();
            }
        });

        // 拖拽平移实现
        svg.addEventListener('mousedown', (e) => {
            isDragging = true;
            // 获取鼠标相对于容器的初始位置
            startPos.x = e.clientX - container.scrollLeft;
            startPos.y = e.clientY - container.scrollTop;
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;

            // 计算鼠标移动的距离
            const deltaX = e.clientX - startPos.x - container.scrollLeft;
            const deltaY = e.clientY - startPos.y - container.scrollTop;

            // 更新viewBox的偏移量（反向偏移，拖拽时内容方向与鼠标相反）
            viewBoxOffset.x -= deltaX / scale;
            viewBoxOffset.y -= deltaY / scale;

            updateViewBox();
            // 更新起始位置，保证平滑拖拽
            startPos.x = e.clientX - container.scrollLeft;
            startPos.y = e.clientY - container.scrollTop;
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });

        // 阻止SVG内部元素的默认拖拽行为
        svg.addEventListener('dragstart', (e) => e.preventDefault());
    </script>
</body>
</html>

关键修改说明 #

1. 用viewBox替代CSS缩放

   • viewBox="0 0 300 300"定义了SVG内部坐标系统的范围，完全覆盖蓝色矩形及周围空间。
   • 缩放时通过调整viewBox的宽高（原始宽度/缩放比例）实现内容放大/缩小，容器滚动条会基于viewBox计算出的SVG实际尺寸生成，确保能滚动看到完整内容。

2. 实现鼠标拖拽平移

   • 监听鼠标事件修改viewBox的minX和minY偏移量，实现内容平移，拖拽逻辑考虑了当前缩放比例，保证拖拽速度与视觉一致。

3. 优化布局与交互

   • 将SVG设为块级元素消除默认间距；添加拖拽状态的光标变化；限制最小缩放比例避免内容过小。

内容的提问来源于stack exchange，提问作者martin.p