深入讲解SVG viewBox属性的用法，包括缩放、偏移、响应式设计等核心技巧。掌握viewBox是精通SVG的关键。 viewBox 是 SVG 最核心的属性，没有之一。理解了它，你才能真正掌握 SVG。
viewBox="min-x min-y width height"
四个参数的含义：
| 参数 | 说明 |
|---|---|
| min-x | 视口左上角在画布上的 x 坐标 |
| min-y | 视口左上角在画布上的 y 坐标 |
| width | 视口显示的画布宽度 |
| height | 视口显示的画布高度 |
viewBox 的宽高决定了缩放比例。
viewBox="0 0 80 80"
1:1 原始大小
viewBox="0 0 40 40"
放大 2 倍
viewBox="0 0 160 160"
缩小 0.5 倍
计算公式：
缩放比例 = 视口尺寸 / viewBox 尺寸
min-x 和 min-y 决定了从画布的哪个位置开始显示。
假设这是完整的画布
viewBox="50 20 80 80"
viewBox="110 20 80 80"
viewBox="170 20 80 80"
<svg width="80" height="80" viewBox="50 20 80 80">
<!-- 显示画布上 (50,20) 到 (130,100) 的区域 -->
</svg>
图标通常设计在 24×24 或 32×32 的画布上。用 viewBox 固定设计尺寸，只改变视口大小。
同一个 viewBox，不同尺寸
<svg viewBox="0 0 24 24" width="16">
<path d="M12 17.27L18.18 21..."/>
</svg>
设置 width: 100%，让 SVG 跟随容器宽度。
svg {
width: 100%;
height: auto;
}
用 JavaScript 动态修改 viewBox，实现缩放效果。
const svg = document.querySelector('svg');
let scale = 100;
function zoomIn() {
scale = Math.max(20, scale - 20);
svg.setAttribute('viewBox', `0 0 ${scale} ${scale}`);
}
修改 viewBox 的偏移值，实现平移。
function pan(dx, dy) {
const viewBox = svg.viewBox.baseVal;
viewBox.x += dx;
viewBox.y += dy;
}
当 viewBox 宽高比和视口不一致时，SVG 会按默认方式处理（居中，保持比例）。
viewBox 正方形，视口长方形，自动居中
要改变这个行为，需要用 preserveAspectRatio 属性。
viewBox 的 min-x 和 min-y 可以是负数。
viewBox="-20 -20 80 80"
viewBox="0 0 80 80"