viewBox="0 0 width height"易错因未匹配图形实际坐标范围，需据图形原始位置反推min-x、min-y及宽高；preserveAspectRatio决定缩放方式，默认"xMidYMid meet"安全；JS修改须用setAttribute而非baseVal。
viewBox="0 0 width height" 是最常见却最容易出错的写法
很多人直接抄模板写 viewBox="0 0 100 100"，结果图形小得看不见或撑爆容器。这不是语法错，而是没匹配图形实际坐标范围。
SVG画布是无限大的，viewBox 定义的是“取景框”，不是“裁剪框”。如果图形画在 x=200，而 viewBox="0 0 100 100"，那它就在取景框外——完全不可见。
- 先删掉
viewBox，用浏览器开发者工具选中<svg></svg>，看图形原始位置和尺寸（比如<rect x="50" y="30" width="300" height="200"></rect>） - 据此反推：min-x 应为
50，min-y 为30，width 为300，height 为200→viewBox="50 30 300 200" - 若图形分散、有留白，可适当扩大 width/height（如加 20），避免边缘被切
preserveAspectRatio 配合 viewBox 决定是否居中、是否裁剪
viewBox 只管“取哪一块”，真正决定“怎么塞进容器”的是 preserveAspectRatio。默认值 "xMidYMid meet" 是安全起点，但不是万能解。
-
"xMidYMid meet"：等比缩放 + 居中，内容完整可见，可能留白（推荐图标、UI 元素） -
"xMidYMid slice"：等比缩放 + 居中，填满容器，可能裁边（适合 banner、背景图） -
"none"：强制拉伸，宽高比失真（慎用，仅当明确接受变形时） - 只有当
viewBox宽高比 ≠ 容器（width/height或 CSS 尺寸）宽高比时，该属性才生效
动态修改 viewBox 必须用字符串赋值，不能改 baseVal
想用 JS 缩放或平移 SVG？别碰 svg.viewBox.baseVal —— 它在现代浏览器中已废弃，行为不一致，且赋值后不触发重绘。
- ✅ 正确写法：
svg.setAttribute('viewBox', '10 10 200 150') - ❌ 错误写法：
svg.viewBox.baseVal.x = 10（无效，可能报错） - 修改后若需立即获取布局尺寸，手动调用
svg.getBoundingClientRect() - 要做平滑动画？
viewBox不支持 CSS transition，得用requestAnimationFrame逐帧更新字符串
响应式 SVG 的关键：width/height 留空或用 CSS 控制，靠 viewBox 驱动缩放
把 width 和 height 写死在 HTML 里，就等于锁死了容器尺寸，失去响应能力。真正的响应式靠的是 viewBox + CSS。
- HTML 中去掉
width和height属性，或设为auto（部分场景） - 用 CSS 控制显示尺寸：
svg { width: 100%; height: auto; }或设为固定宽高比容器 - 此时
viewBox的缩放逻辑依然生效：视口尺寸 ÷ viewBox 尺寸 = 实际缩放比 - 注意：
<text></text>在极端缩放下会模糊，可加shape-rendering="geometricPrecision"提升文字渲染质量
复杂点在于，viewBox 的四个数必须共同服务于图形的实际空间分布；单改其中一个，可能让整个坐标系偏移或缩放失控。最容易被忽略的是 min-x/min-y 的负值用法——它不是 bug，而是让你“向左/上露出更多内容”的合法手段，比如实现图标 hover 时的微动效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
