viewBox 是坐标系重映射工具而非缩放开关，它将原始绘图区域按容器尺寸等比投影；必须配合 width/height 才生效，且需与 preserveAspectRatio 协同控制对齐与裁剪方式。
viewBox 属性不是缩放控制开关，而是坐标系重映射工具
很多人以为给 viewBox 加个宽高就能“让 SVG 自适应缩放”，结果发现图形被拉伸、文字变模糊、图标错位——问题不在缩放本身，而在没理解 viewBox 实际干的是「把原始绘图区域重新投影到容器尺寸上」这件事。
它不改变 SVG 内部路径的数值，只改解释这些数值的坐标系。比如 viewBox="0 0 100 100" 意味着：所有 x="50" 都被当成“占原始宽度一半”，再按容器实际宽高去等比映射。
- 没设
viewBox的 SVG，浏览器按原始像素尺寸渲染，width/height只是拉伸画布，不重绘 -
viewBox必须配合width和/或height（哪怕用100%）才生效；光写viewBox不设尺寸，SVG 会塌成 0×0 - 若容器宽高比和
viewBox宽高比不一致，又没设preserveAspectRatio，默认会居中裁切（不是等比缩放）
preserveAspectRatio 控制如何填满容器，不是要不要缩放
这个属性常被忽略，但它直接决定 viewBox 映射时的对齐与裁剪行为。默认值 preserveAspectRatio="xMidYMid meet" 是最常用也最安全的，意思是：等比缩放后居中显示，完整可见（可能留白）。
-
meet→ 保证全部内容可见，可能有空白；slice→ 填满容器，可能裁边 -
xMinYMin会让图形左上角对齐容器左上角，适合做图标拼贴或 CSSbackground-image场景 - 设成
none就强制拉伸变形，仅在明确需要像素级拉伸（如背景纹理）时用 - 在 inline SVG 中修改该属性无需 JS，直接写在标签上：
<svg viewbox="0 0 24 24" preserveaspectratio="xMinYMin meet"></svg>
响应式 SVG 里 width/height 用百分比 or rem，别用 px
如果给 SVG 写死 width="24px"，那它就永远是 24 像素宽，viewBox 再灵活也救不了——响应式失效的根源往往在这里。
立即学习“前端免费学习笔记（深入）”；
- CSS 中用
width: 100%或width: 2rem才能随父容器变化；内联width="100%"在部分旧浏览器（IE）支持不稳定，优先走 CSS - 避免同时写内联
width和 CSSwidth，后者会覆盖前者，但某些场景下（如 CMS 输出）内联值难改，就得用!important或更具体的选择器压制 - 对于图标类 SVG，建议统一用
width: 1em+vertical-align: middle，自然跟随字体大小，适配按钮、行内文本等场景
inline SVG 中的 <use></use> 引用需注意 viewBox 继承边界
用 <use href="#icon-home"></use> 复用符号时，viewBox 不会自动从定义处继承到 <use></use> 实例——每个实例仍受自身所在 <svg></svg> 的 viewBox 和尺寸控制。
- 符号定义（
<defs></defs>里的<svg id="icon-home" viewbox="0 0 24 24"></svg>）只提供图形数据，不参与渲染 -
<use></use>渲染时，完全依赖其父<svg></svg>的viewBox、width、height和preserveAspectRatio - 想让多个
<use></use>保持统一缩放？确保它们共用同一个外层<svg></svg>容器，并统一设置该容器的viewBox - 调试时可临时加
border: 1px solid red到外层<svg></svg>，看清实际渲染区域是否符合预期
真正卡住人的从来不是 viewBox 语法，而是它和容器尺寸、preserveAspectRatio、引用方式这三者的耦合关系。改一处，得同步看另外两处是否还匹配——尤其在嵌套布局或 CMS 动态插入 SVG 时，这种隐式依赖最容易漏掉。
