viewBox定义SVG坐标系的原点、宽高和缩放基准，值为"min-x min-y width height"，决定内容可见范围与缩放方式，但不控制最终渲染尺寸；实际显示大小由width/height或CSS控制。
viewBox 是什么，它到底控制什么
viewBox 不是“设置 SVG 尺寸”的属性，而是定义 SVG 坐标系的原点、宽高和缩放基准。它的值形如 "min-x min-y width height"，四个数字共同划定一个逻辑画布区域——浏览器会把这个区域“拉伸填满”到 width/height 指定的容器空间里。
关键点在于：viewBox 决定了“哪些内容可见”和“怎么缩放”，但不决定最终渲染像素大小；真正控制显示尺寸的是 SVG 元素自身的 width 和 height（或 CSS 的 width/height）。
常见 viewBox 错误：内容被裁剪或缩放失真
典型现象是图形突然只显示左上角一部分，或文字变得极小/极大。这往往是因为：
-
viewBox的width和height与内部图形实际范围严重不匹配（比如设成"0 0 10 10"，但图形坐标却在x=100处） - 没设
width/height，导致 SVG 使用默认 300×150 像素容器，而viewBox又很大，结果图形被极度压缩 - 误把
viewBox当作“裁剪框”，以为改min-x/min-y就能平移画面——其实它只是重定义坐标系原点，平移效果需配合内部元素位置调整
如何用 viewBox 实现等比缩放与居中显示
想让一组图形始终完整、居中、等比显示在固定容器内？核心是保持 viewBox 宽高比与容器宽高比一致，并用 preserveAspectRatio 控制对齐方式。
例如容器为 400×300 像素，图形实际分布在 x=50 到 x=350、y=20 到 y=220 范围内：
<svg width="400" height="300" viewbox="50 20 300 200" preserveaspectratio="xMidYMid meet"></svg>
其中：
-
viewBox="50 20 300 200"精确框出图形逻辑范围 -
preserveAspectRatio="xMidYMid meet"表示居中对齐 + 等比缩放（不裁剪），这是最常用组合 - 若改用
"xMidYMid slice"，则会填满容器但可能裁剪边缘
动态修改 viewBox 的注意事项
通过 JS 修改 viewBox 是可行的，但要注意：
- 必须用字符串赋值，不能拆成对象属性：
svg.setAttribute('viewBox', '0 0 200 100')✅，svg.viewBox.baseVal在现代浏览器中已废弃且行为不一致 ❌ - 修改后不会自动触发布局重排，如果依赖尺寸计算，需手动
getBoundingClientRect()或触发重绘 - 动画
viewBox值本身不支持 CSS 过渡，需用requestAnimationFrame逐帧更新字符串 - 缩放过大时，
shape-rendering="geometricPrecision"或改用transform: scale()替代
复杂交互中，viewBox 的数值精度容易被忽略——哪怕小数点后多一位，都可能导致 Safari 下轻微错位或 Chrome 中触发 subpixel 渲染异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
