viewBox不是设置SVG大小的属性，而是定义内部坐标系的逻辑画布范围，其四个值“min-x min-y width height”框定图形映射区域，缩放效果由它与width/height的比值及preserveAspectRatio共同决定；缺viewBox则退化为位图拉伸失真，需三者协同才能实现等比缩放、完整居中且不失真。
viewBox 不是“设置 SVG 大小”的属性，而是定义 SVG 内部坐标系的逻辑画布范围。它直接决定图形是否完整可见、按什么比例缩放、从哪里开始绘制——真正控制缩放行为的，正是它与 width/height 和 preserveAspectRatio 的配合。
viewBox 怎么影响缩放效果
viewBox 的四个值 "min-x min-y width height" 共同框出一个逻辑区域，浏览器会把这个区域“适配”进 SVG 的视口（即 width/height 指定的显示空间）。缩放不是由 viewBox 单独完成的，而是由它和视口尺寸的比值驱动的：
- 如果 viewBox 宽高都小于视口（比如 viewBox="0 0 100 100"，而 width="400" height="300"），内容会被放大
- 如果 viewBox 宽高都大于视口（比如 viewBox="0 0 800 600"，而 width="200" height="150"），内容会被缩小
- 若 viewBox 宽高比 ≠ 视口宽高比，缩放结果是否变形，取决于 preserveAspectRatio 的设置
为什么没写 viewBox 就会拉伸失真
不设 viewBox 时，SVG 退化为位图式容器：内部坐标直接映射为像素，缩放靠浏览器硬拉伸。哪怕只改 width="100%" height="auto"，没有 viewBox 也无法保持矢量特性。
- 此时
<circle cx="50" cy="50" r="10">中的 50 就是 50 像素，不是相对单位 - 一旦父容器变窄，图形被横向压扁，圆变成椭圆
- 只有加上 viewBox（如 "0 0 100 100"），50 才代表 viewBox 宽度的 50%，缩放才真正等比
如何让图形始终完整居中且不失真
关键在三者协同：精确的 viewBox 范围 + 匹配的容器比例约束 + 合理的 preserveAspectRatio。
- 先用工具或计算确定图形实际分布范围，例如 x∈[30, 330]、y∈[20, 220] → viewBox="30 20 300 200"
- 容器用 CSS
aspect-ratio: 3 / 2锁定比例，或 SVG 设width="100%" height="auto" - 加上
preserveAspectRatio="xMidYMid meet"：居中对齐、等比缩放、不裁剪
响应式 SVG 的稳妥写法
避免 JS 监听 resize 或复杂 media query，现代布局有更轻量方案：
-
图标类简单 SVG：直接写
<svg viewBox="0 0 24 24" width="100%" height="auto">，依赖浏览器自动推高 -
图表或需严格比例的 SVG：用 div 包一层，
<div style="aspect-ratio: 4 / 3"><svg viewBox="0 0 400 300" width="100%" height="100%"></svg></div> - 注意：若父级 div 没高度也没 aspect-ratio，height="auto" 会塌成 0，SVG 消失——问题不在 SVG，而在外层布局
