4、SVG 缩放：viewBox 与 preserveAspectRatio 的深度解析
SVG 的缩放，说白了就是「画布」和「屏幕」之间的映射关系。很多同学刚开始接触 SVG 时，总觉得它跟普通图片一样，设个宽高就完事了。结果一放大，糊了；一缩小，变形了。
嗯，这其实是因为你没搞懂 viewBox 和 preserveAspectRatio 这两个核心属性。我当年在做一个大屏可视化项目时，就被这个坑过——SVG 地图在 1920 屏上好好的，换到 1366 屏上直接跑偏了。后来花了整整一下午才把这两个属性吃透。
4.1 viewBox：定义你的「虚拟坐标系」
viewBox 是 SVG 的灵魂。它决定了 SVG 内部元素的坐标系统，而不是最终显示尺寸。
<svg width="400" height="300" viewBox="0 0 200 150">
<rect x="10" y="10" width="100" height="50" fill="#3498db" />
</svg>这段代码的意思是：
- SVG 显示区域是 400×300 像素
- 内部坐标系是 200×150 个单位
- 矩形在内部坐标系中位于 (10,10)，宽 100、高 50
- 最终显示时，内部 1 个单位会被放大为 2 个像素
说白了，viewBox 就是你的「虚拟画布」。你在这个画布里画图，SVG 会自动帮你映射到实际显示区域。
核心公式：
缩放比例 = 显示宽度 / viewBox宽度
显示坐标 = 内部坐标 × 缩放比例
4.2 preserveAspectRatio：控制「怎么缩放」
光有 viewBox 还不够。当显示区域的宽高比和 viewBox 的宽高比不一致时，就需要 preserveAspectRatio 来救场了。
它的语法长这样：
preserveAspectRatio="<align> <meetOrSlice>?"我习惯把它拆成两部分来理解：
| 部分 | 可选值 | 作用 |
|---|---|---|
| 对齐方式 | xMinYMin, xMidYMin, xMaxYMin xMinYMid, xMidYMid, xMaxYMid xMinYMax, xMidYMax, xMaxYMax |
决定 viewBox 在显示区域中的位置 |
| 缩放模式 | meet（默认）, slice | 决定缩放策略 |
meet 模式： 保持宽高比，让整个 viewBox 可见。相当于 CSS 的 object-fit: contain。会有留白。
slice 模式： 保持宽高比，填满整个显示区域。相当于 CSS 的 object-fit: cover。会裁剪内容。
我的习惯： 做图标和 Logo 时用 xMidYMid meet，居中且完整显示。做全屏背景图时用 xMidYMid slice，不留白。
4.3 实战对比：三种常见场景
来看一个具体的例子。假设 viewBox 是 0 0 100 100，显示区域是 200×100：
| preserveAspectRatio | 效果 | 适用场景 |
|---|---|---|
| xMidYMid meet | 居中显示，上下留白 | 图标、Logo、图表 |
| xMidYMid slice | 居中显示，上下裁剪 | 全屏背景、地图 |
| none | 拉伸填满，变形 | 极少用，除非你故意要变形 |
我曾经踩过的坑： 在响应式布局中，给 SVG 设了 width: 100%; height: auto，但没设 viewBox。结果 SVG 在不同屏幕下要么被截断，要么变形。后来我养成了习惯：每个 SVG 都必须有 viewBox，哪怕宽高比是 1:1。
4.4 知识结构图：viewBox 与 preserveAspectRatio 的关系
下面这张图帮你理清这两个属性的协作逻辑：
4.5 响应式 SVG 的最佳实践
在实际项目中，我总结了一套「三步走」策略：
- 固定 viewBox： 不管显示尺寸怎么变，viewBox 始终不变。这样内部元素的位置和比例就稳了。
- 设置 preserveAspectRatio： 根据场景选 meet 或 slice。默认的
xMidYMid meet适合大多数情况。 - CSS 控制显示尺寸： 用
max-width: 100%; height: auto让 SVG 自适应容器。
<!-- 响应式 SVG 模板 -->
<svg
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet"
style="max-width: 100%; height: auto;"
>
<!-- 你的内容 -->
</svg>小技巧： 如果你想让 SVG 在移动端和桌面端都完美显示，可以把 viewBox 的宽高比设成跟最常见的屏幕比例一致。比如 16:9 或 4:3。这样 meet 模式下的留白最少。
4.6 常见误区与避坑
- 误区一： 认为 viewBox 的数值越大，显示就越大。其实 viewBox 只影响内部坐标系，显示大小由 width/height 或 CSS 决定。
- 误区二： 忘记设 viewBox。没有 viewBox 的 SVG，缩放行为会变得不可预测。
- 误区三： 在
preserveAspectRatio="none"时还期望内容不变形。none 就是故意让它变形的。
我曾经犯过的错： 在一个数据可视化项目中，我用了 preserveAspectRatio="xMinYMin meet"，结果图表在宽屏显示器上全部挤在左上角。后来改成 xMidYMid meet 才正常居中显示。记住：对齐方式决定了内容在显示区域里的「锚点」。
好了，viewBox 和 preserveAspectRatio 的核心内容就这些。你想想看，这两个属性其实就是在做一件事：把虚拟世界映射到现实屏幕。搞懂了映射规则，SVG 缩放就不再是玄学了。