详细讲解SVG视口与画布的概念和关系。理解这两个概念是掌握SVG坐标系统的基础。 视口和画布是 SVG 坐标系统的两个基础概念。搞清楚它们，后面的学习会顺畅很多。
视口（Viewport）是 SVG 在网页上占据的区域。简单说，就是 SVG 的"外框"。
由 width 和 height 属性定义：
<svg width="300" height="150">
<!-- 视口大小 300×150 -->
</svg>
视口可以用不同单位：
<svg width="100%" height="200"> <!-- 百分比 + 像素 -->
<svg width="50vw" height="30vh"> <!-- 视口单位 -->
<svg width="20em" height="10em"> <!-- 相对单位 -->
画布（Canvas）是 SVG 内部的坐标空间。你在里面画图形时用的坐标，就是相对于画布的。
默认情况下，画布大小等于视口大小。
<svg width="300" height="150">
<line x1="0" y1="0" x2="300" y2="150" stroke="#e74c3c"/>
<circle cx="150" cy="75" r="50" fill="#3498db"/>
</svg>
SVG 的坐标原点在左上角：
这和 Canvas、CSS 的坐标系统一致。
默认情况下，视口和画布是一一对应的：
但 viewBox 可以改变这种关系。viewBox 让画布和视口"解绑"。
无 viewBox
50×50 的矩形
viewBox="0 0 50 50"
同样的代码，放大了
<svg width="100" height="100">
<rect x="0" y="0" width="50" height="50" fill="#3498db"/>
</svg>
<svg width="100" height="100" viewBox="0 0 50 50">
<rect x="0" y="0" width="50" height="50" fill="#e74c3c"/>
</svg>
第二个例子中：
图标通常有固定的设计尺寸，比如 24×24。用 viewBox 可以保持设计坐标不变。
同一个 viewBox，不同视口尺寸
<svg viewBox="0 0 24 24" width="24">
<path d="M12 2C6.48 2 2 6.48 2 12..."/>
</svg>
图表需要适应不同屏幕宽度，用 width: 100% + viewBox 实现。
<svg viewBox="0 0 400 200" style="width: 100%; height: auto;">
<!-- 图表内容 -->
</svg>
通过调整 viewBox 的偏移，可以实现局部放大效果。
完整视图
左上角放大
| 概念 | 定义方式 | 说明 |
|---|---|---|
| 视口 | width/height | SVG 在页面上的大小 |
| 画布 | 默认等于视口 | 内部坐标空间 |
| viewBox | viewBox 属性 | 改变画布与视口的映射关系 |