SVG viewBox – 缩放、裁剪和适配 SVG 图形

SVG `viewBox`

viewBox 属性告诉 SVG 应把哪个坐标矩形适配到可见 viewport 中。通过改变它的四个值，可以缩放图稿、裁剪图稿、移动可见区域，或让同一个 SVG 干净地适应不同显示尺寸。

本文是实用的 viewBox 指南。它假设你已经了解 SVG canvas、viewport 和坐标系统。如果这些概念还不清楚，请先阅读 SVG 坐标系统和单位。

本文将学习：

读取 viewBox="min-x min-y width height" 语法。
通过改变 viewBox 的 width 和 height 缩放 SVG artwork。
通过改变 min-x 和 min-y 裁剪或重新定位 SVG artwork。
将 viewBox 与 preserveAspectRatio 结合，得到响应式 SVG 输出。

`viewBox` 如何工作

SVG 规范把 viewBox 定义为一个为 SVG viewport 建立用户坐标系统的属性。它包含四个由空格分隔的值：

1viewBox="min-x min-y width height"

值	含义
`min-x`	可见矩形开始处的 x 坐标
`min-y`	可见矩形开始处的 y 坐标
`width`	可见坐标矩形的宽度
`height`	可见坐标矩形的高度

viewport 是由 width、height、CSS 或周围布局定义的输出区域。viewBox 是 SVG 映射到该输出区域中的坐标矩形。如果 viewBox 小于 viewport，选中的坐标区域会被放大；如果它大于 viewport，图稿看起来会变小，因为更多坐标空间被适配到同一个可见区域中。

1<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
2    ...
3</svg>

改变 min-x 或 min-y 会移动可见坐标矩形。
改变 width 或 height 会改变比例。
同时改变四个值会组合重新定位和缩放。

注意： 在下面的插图中，viewport 用绿色表示，viewBox 区域用蓝色表示。

SVG viewBox 缩放示例 – 原始、缩小和放大

本文使用的示例 SVG

下面的示例使用同一个简单的花形 SVG 图稿。只有 viewBox 值发生变化，因此你可以看到坐标矩形如何影响渲染结果。

 1<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
 2  <g fill="RoyalBlue">
 3    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" />
 4    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(90 125 128)" />
 5    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(-45 125 128)" />
 6    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(45 125 128)" />
 7  </g>
 8  <circle cx="125" cy="128" r="28" stroke="pink" stroke-width="50" stroke-dasharray="3 13" fill="Orange" />
 9  <circle cx="125" cy="128" r="5" />
10</svg>

使用 `viewBox` 缩放 SVG

通过 viewBox 缩放由最后两个值控制：width 和 height。它们定义有多少坐标空间会被适配到 viewport 中。

使用较大的 `viewBox` 缩小显示

当 viewBox 的 width 和 height 大于 viewport 尺寸时，SVG 会把更大的坐标区域适配到同一个输出尺寸中。结果看起来更小，因为一次能看到更多 canvas 区域。

1<svg width="250" height="250" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">

SVG viewBox 缩小显示 – 较大的 viewBox 被适配到 viewport

使用较小的 `viewBox` 放大显示

当 viewBox 的 width 和 height 小于 viewport 尺寸时，SVG 会把这个较小的坐标区域放大到填满 viewport。结果看起来被放大，选定矩形外的内容可能被裁剪。

1<svg width="250" height="250" viewBox="0 0 125 125" xmlns="http://www.w3.org/2000/svg">

SVG viewBox 放大显示 – 较小 viewBox 放大内容

使用 `viewBox` 裁剪或重新定位 SVG

裁剪和重新定位由 viewBox 的前两个值控制：min-x 和 min-y。这些值移动可见坐标矩形的起点。

裁剪右侧

负 min-x 会把选中的坐标矩形向左移动。在这个示例中，可见矩形覆盖从 -100 到 150 的 x 坐标，因此右侧内容被裁剪。

1<svg width="250" height="250" viewBox="-100 0 250 250" xmlns="http://www.w3.org/2000/svg">

SVG viewBox 裁剪右侧

裁剪左侧

正 min-x 会把选中的坐标矩形向右移动。在这个示例中，可见矩形从 x 坐标 100 开始，因此图稿左侧不再可见。

1<svg width="250" height="250" viewBox="100 0 250 250" xmlns="http://www.w3.org/2000/svg">

SVG viewBox 裁剪左侧

响应式 SVG 和 `preserveAspectRatio`

对于响应式 SVG，保留 viewBox，让 CSS 或容器控制显示尺寸：

1<svg viewBox="0 0 250 250" width="100%" height="auto" xmlns="http://www.w3.org/2000/svg">

默认情况下，SVG 会保持 viewBox 的宽高比。如果 viewport 和 viewBox 比例不同， preserveAspectRatio 属性控制对齐和适配行为。

1<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet">

当整个图像必须保持可见时使用 meet。当 viewport 必须完全被覆盖且允许裁剪时使用 slice。

如何使用 SVG viewBox

用 width、height、CSS 或布局设置可见 viewport。
用 viewBox="min-x min-y width height" 选择坐标矩形。
改变 viewBox 的 width 和 height 来放大或缩小。
改变 min-x 和 min-y 来裁剪或重新定位可见区域。
当 viewport 和 viewBox 比例不同时，添加 preserveAspectRatio。

Common Mistakes and Fixes

问题	原因	解决方法
SVG 看起来被拉伸或压扁	viewport 和 `viewBox` 宽高比不同，且未控制适配行为	添加 `preserveAspectRatio="xMidYMid meet"` 或选择合适值
图稿被意外裁剪	`viewBox` 矩形没有覆盖目标坐标区域	将 `min-x`、`min-y`、`width`、`height` 与图稿坐标对照检查
SVG 不能响应式缩放	SVG 有固定显示尺寸但没有 `viewBox`	保留 `viewBox`，用 CSS 或容器布局控制显示尺寸
修改 CSS 尺寸没有改变裁剪	CSS 改变的是 viewport 尺寸，不是选中的坐标矩形	需要不同裁剪或缩放区域时，修改 `viewBox` 值
`viewBox` 被忽略	缺少引号、逗号使用错误或值数量不对	使用四个由空格分隔的值：`viewBox="min-x min-y width height"`

Quick Recipes

任务	SVG 示例
保持整个 SVG 可缩放	`<svg viewBox="0 0 250 250" width="100%" height="auto">`
放大 2 倍	`<svg width="250" height="250" viewBox="0 0 125 125">`
缩小 2 倍	`<svg width="250" height="250" viewBox="0 0 500 500">`
将可见区域向右移动	`<svg width="250" height="250" viewBox="100 0 250 250">`
保持完整图像可见	`<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet">`
填满 viewport，即使发生裁剪	`<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid slice">`

FAQ – viewBox 常见问题

viewBox 属性做什么？

viewBox 属性定义 SVG canvas 中哪个坐标矩形会映射到 viewport。它控制缩放、裁剪和可见定位，而不改变实际形状。

viewBox 与 width、height 有什么区别？

width 和 height 定义输出 viewport 尺寸。viewBox 定义被适配到该 viewport 的坐标区域。改变 width 和 height 会改变显示尺寸；改变 viewBox 会改变显示哪个坐标空间以及如何缩放。

响应式 SVG 需要 viewBox 吗？

通常需要。viewBox 为 SVG 提供稳定的内部坐标系统，而 CSS 或容器尺寸可以改变显示大小。这是响应式 SVG 图形最可靠的模式。

viewBox 可以裁剪 SVG 吗？

可以。改变 min-x、min-y、width 和 height，让 viewBox 只覆盖你想显示的 canvas 部分。选中坐标矩形之外的内容会被 viewport 裁剪。

viewBox 会改变 path data 或形状坐标吗？

不会。viewBox 改变已有坐标映射到 viewport 的方式。它不会重写 d、x、y、cx、cy 或其他几何属性。

规范和相关资源

SVG 规范中的 viewBox attribute 章节定义用户坐标矩形如何映射到 viewport。
preserveAspectRatio attribute 章节解释当宽高比不同时，SVG 如何对齐和缩放 viewBox 内容。
如果需要理解 viewBox 背后的坐标模型，请从 SVG 坐标系统和单位开始。
需要用 transform 属性移动、旋转、缩放、倾斜或翻转已有 SVG 元素时，使用 SVG 变换。
打开 SVG 形状，了解 viewBox 改变显示比例之前，坐标如何定义矩形、圆、椭圆、直线、折线和多边形。
阅读 What is an SVG File?，了解 SVG 结构、优势和文件格式基础。

SVG 坐标系统和单位 SVG 形状