要用 viewbox 实现 svg 响应式自适应缩放，核心是定义逻辑坐标系而非写死宽高：必须设置 viewbox 属性（如 viewbox="0 0 24 24"），移除或设为 auto 的 width/height，并用 css 控制显示尺寸（如 width: 100%; height: auto;），确保 viewbox 宽高比与 css 设置一致以实现等比缩放。
要用 viewBox 实现 SVG 响应式自适应缩放，核心就一条：让浏览器知道图形该按什么比例缩放。关键不是写死宽高，而是定义好逻辑坐标系，再交由 CSS 控制显示尺寸。
必须带 viewBox，且不能写死 width/height
viewBox 是响应式缩放的“锚点”。它告诉浏览器：“这个 SVG 内部内容实际占多大范围”，格式为 viewBox="min-x min-y width height"。比如图标原始图形画在 x=0–24、y=0–24 区域，就写 viewBox="0 0 24 24"。
同时要删掉 width 和 height 属性（或设为 auto）。它们会覆盖 viewBox 的比例逻辑，一旦写死像素值，SVG 就退化成位图处理，失去矢量缩放能力。
- 错误写法：
<svg width="24" height="24" viewbox="0 0 24 24"></svg> - 正确写法：
<svg viewbox="0 0 24 24"></svg>，再用 CSS 控制大小
用 CSS 控制尺寸，触发等比缩放
viewBox 定义了比例关系，CSS 才真正驱动缩放行为。常见可靠组合：
-
svg { width: 100%; height: auto; }—— 宽度随容器变，高度自动按 viewBox 宽高比计算 -
svg { width: 1.5em; height: 1.5em; }—— em 单位可随父字体缩放，适合图标按钮 -
svg { display: block; max-width: 100%; height: auto; }—— 防止内联元素换行干扰，兼顾图片类布局
只要 viewBox 宽高比和 CSS 设置的宽高比一致，图形就严格等比；不一致时，由 preserveAspectRatio 决定如何适配（默认 xMidYMid meet，居中+完整显示，留白不裁切）。
viewBox 值必须匹配图形真实范围
很多人抄 viewBox="0 0 100 100" 导致图标看不见或溢出，是因为没看图形实际坐标。解决方法很简单：
- 先去掉 viewBox，用开发者工具 inspect SVG，看内部
<path></path>或<rect></rect>的x、y、width、height - 取最小 x 和 y 作为
min-x、min-y，再算出总宽高 - 例如：
<circle cx="60" cy="40" r="20"></circle>→ 覆盖范围 x=40–80、y=20–60 →viewBox="40 20 40 40"
有留白或需微调可视区域，可适当扩大 width/height，但不要改 min-x/min-y，否则图形偏移。
动态修改 viewBox 要用 setAttribute
如果需要 JS 控制缩放或平移（比如放大局部），不能改 svg.viewBox.baseVal —— 已废弃且不触发重绘。
- ✅ 正确：
svg.setAttribute('viewBox', '20 10 150 100'); - ❌ 错误：
svg.viewBox.baseVal.x = 20;
若需动画效果，得用 requestAnimationFrame 逐帧更新字符串；CSS transition 对 viewBox 无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
