尝试动态设置viewBox宽度/高度

基础概念

viewBox 是 SVG（可缩放矢量图形）中的一个属性，用于定义图形的坐标系统和大小。viewBox 的值是一个包含四个数字的字符串，格式为 minX minY width height，其中 (minX, minY) 是坐标系统的原点，width 和 height 是坐标系统的宽度和高度。

动态设置 `viewBox` 宽度/高度的优势

响应式设计：动态设置 viewBox 可以使 SVG 图形根据容器的大小自动调整，从而实现响应式设计。
灵活性：可以根据不同的需求动态调整 viewBox 的大小，以适应不同的显示场景。
性能优化：相对于重新生成 SVG 图形，动态调整 viewBox 更加高效。

类型

viewBox 的类型主要取决于其值的格式：

固定 viewBox：viewBox 的值是固定的，不会随外部条件变化。
动态 viewBox：viewBox 的值可以根据外部条件（如窗口大小、容器大小等）动态变化。

应用场景

网页设计：在网页设计中，SVG 图形经常用于图标、背景等，动态设置 viewBox 可以使这些图形在不同设备上都能良好显示。
数据可视化：在数据可视化中，SVG 图形常用于绘制图表，动态设置 viewBox 可以使图表根据数据的变化自动调整大小。
交互式应用：在交互式应用中，动态设置 view板 可以实现图形的缩放和平移功能。

动态设置 `viewBox` 的示例代码

以下是一个使用 JavaScript 动态设置 viewBox 宽度和高度的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic ViewBox Example</title>
    <style>
        #svgContainer {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="svgContainer">
        <svg id="mySvg" viewBox="0 0 100 100">
            <rect x="10" y="10" width="80" height="80" fill="blue"/>
        </svg>
    </div>

    <script>
        function setViewBox() {
            const container = document.getElementById('svgContainer');
            const svg = document.getElementById('mySvg');
            const width = container.clientWidth;
            const height = container.clientHeight;
            svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
        }

        window.addEventListener('resize', setViewBox);
        setViewBox();
    </script>
</body>
</html>

可能遇到的问题及解决方法

viewBox 设置不正确：如果 viewBox 的值设置不正确，可能会导致 SVG 图形显示异常。确保 viewBox 的值格式正确，并且与图形的实际大小匹配。
性能问题：频繁地动态调整 viewBox 可能会导致性能问题。可以通过节流（throttling）或防抖（debouncing）来优化性能。
兼容性问题：某些旧版本的浏览器可能不支持 viewBox 属性。可以通过检测浏览器版本并提供替代方案来解决兼容性问题。