viewBox 的四个数值表示“画布左上角坐标 + 宽高”，即 viewBox="min-x min-y width height"；例如 "0 0 100 100" 指从 (0,0) 开始取 100×100 的逻辑画布区域。
viewBox 的四个数值到底代表什么
它不是宽高，而是「画布左上角坐标 + 宽高」： viewBox="min-x min-y width height"。比如 viewBox="0 0 100 100" 表示：从 (0,0) 开始，取一个 100×100 的矩形区域作为 SVG 的“逻辑画布”。浏览器会把这个区域拉伸填满容器（除非设了 preserveAspectRatio）。
常见误解是以为 viewBox 控制显示范围——其实它定义的是坐标系本身。你画的 <circle cx="50" cy="50" r="10"> 能否看见，取决于这组坐标是否落在 viewBox 描述的矩形内。
怎么让 SVG 自适应容器又不拉伸变形
关键在 preserveAspectRatio 属性。默认值是 preserveAspectRatio="xMidYMid meet"，意思是居中对齐、等比缩放、完整可见（可能留白）。如果想裁切掉多余部分，改用 slice：
<svg viewBox="0 0 200 100" preserveAspectRatio="xMinYMin slice">
此时 SVG 会强制填满容器，超出 viewBox 范围的部分被裁掉。
立即学习“前端免费学习笔记（深入）”；
- 要完全贴合且不变形，容器宽高比必须和
viewBox的width/height一致 - 设成
"none"就彻底放弃等比，直接拉伸——慎用，图标容易糊 - 移动端适配时，
viewBox建议用整数（如0 0 16 16），避免小数导致渲染模糊
动态修改 viewBox 的坑
JS 直接改 svgEl.setAttribute('viewBox', '...') 是可行的，但要注意：
- 字符串格式必须严格：不能有空格以外的空白（如换行、tab），否则解析失败，SVG 变空白
- 修改后不会触发布局重排，但图形位置/大小会立刻变化；若依赖尺寸计算，需手动
getBoundingClientRect() - 用 CSS 缩放（
transform: scale()）和改viewBox效果不同：前者只是视觉放大，后者改变的是坐标系基准，影响事件坐标、getPointAtLength等 API
嵌套 SVG 里 viewBox 怎么配合
外层 <svg> 设了 viewBox，内部再嵌一个 <svg>，它的 viewBox 是独立的坐标系，不受外层影响。但外层的 width/height 或 CSS 尺寸会作为该嵌套 SVG 的“容器”来约束其最终显示大小。
典型场景：图标系统里用单个 SVG 文件存多个图标，靠切换内部 <svg> 的 viewBox 和 display 来切换——这时每个子 <svg> 的 viewBox 必须精准匹配自身图形的包围盒，否则留白或截断。
检查方法：用开发者工具选中子 <svg>，看其 getBBox() 返回的 x/y/width/height，直接塞进 viewBox 字符串最稳妥。
