svg缩放由viewbox、width/height和preserveaspectratio共同决定；缺viewbox会导致像素拉伸失真，preserveaspectratio控制对齐与裁剪，响应式推荐用height="auto"或css aspect-ratio锁定容器比例。
HTML 中的 SVG 本身不会“影响”矢量缩放——它天生就是为等比缩放设计的；真正决定缩放行为的是你写的 viewBox、width/height 和 preserveAspectRatio 这三个属性的组合。
为什么加了 width="100%" height="100%" 反而变形了
这是最常踩的坑：只设 width 和 height，却不配 viewBox，SVG 就退化成普通位图容器，浏览器按像素拉伸，完全丢失矢量特性。
- 没写
viewBox→ SVG 使用“用户坐标系”原生尺寸（比如<svg width="200" height="100"></svg>就是 200×100 像素画布），缩放时直接拉伸 - 写了
viewBox="0 0 100 50"但没设preserveAspectRatio→ 默认"xMidYMid meet"，安全但可能留白；若父容器宽高比突变，留白会变多甚至错位 - 写了
viewBox却设preserveAspectRatio="none"→ 强制扭曲，所有比例信息被丢弃，和 PNG 拉伸无异
preserveAspectRatio 不是可选项，是控制开关
即使 viewBox 宽高比和容器一致，preserveAspectRatio 仍决定内容对齐方式和是否裁剪。默认值 "xMidYMid meet" 多数够用，但以下场景必须调：
- 图标需严格贴左上角显示 → 改为
"xMinYMin meet"，但注意右边/下边可能大片空白 - 全屏背景图要求填满且允许裁剪 → 改为
"xMidYMid slice" - 动态切换宽高比的容器（如响应式卡片）→ 建议配合 CSS
aspect-ratio锁定父容器，再让 SVGwidth="100%" height="100%"填满，避免依赖 JS 计算
响应式 SVG 的两种可靠写法
别再靠 JS 监听 resize 或硬写 media query 了。现代浏览器支持纯 CSS 方案：
-
写法一（推荐用于图标/内联 SVG）：
<svg viewbox="0 0 100 50" width="100%" height="auto"></svg>——height="auto"是关键，浏览器自动按viewBox比例推算高度 -
写法二（推荐用于复杂图表/嵌套 SVG）：
<div style="aspect-ratio: 2 / 1"><svg viewbox="0 0 100 50" width="100%" height="100%"></svg></div>—— 用 CSS 锁死容器比例，SVG 填满即可，兼容性好（Chrome 88+、Firefox 89+、Safari 15.4+）
真正容易被忽略的点是：哪怕你用了 viewBox，只要父容器没有明确比例约束（比如 div 没设 height 或 aspect-ratio），height="auto" 就可能塌陷成 0，SVG 消失不见。这时候得回头检查父级布局，而不是改 SVG 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
