SVG viewBox 属性介绍

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。viewBox 是 SVG 中的一个重要属性，用于定义显示区域和图形的缩放比例。

属性语法

viewBox 属性接受一个包含四个参数的字符串，用空格或逗号分隔。这四个参数分别表示图形在用户坐标系统中的左上角 x 坐标、左上角 y 坐标、宽度和高度。具体语法如下：

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

解释

• min-x：图形在用户坐标系统中的左上角 x 坐标。
• min-y：图形在用户坐标系统中的左上角 y 坐标。
• width：图形在用户坐标系统中的宽度。
• height：图形在用户坐标系统中的高度。

viewBox 属性定义了一个用户坐标系统中的可视范围，并将指定的图形调整到该范围内。

举例

假设我们有一个 SVG 图形的代码如下：

<svg width="400" height="400">
  <rect x="50" y="50" width="300" height="300" fill="blue" />
</svg>

若我们将 viewBox 属性设置为 0 0 400 400，代码如下：

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect x="50" y="50" width="300" height="300" fill="blue" />
</svg>

这时，viewBox 定义了一个以左上角为原点、宽度和高度均为400的用户坐标系统。矩形的左上角坐标为 50 50，宽度和高度为 300，被缩放到了整个可视范围内。

使用场景

viewBox 属性在以下场景中很有用：

• 缩放变换：使用 viewBox 可以轻松地将图形的比例进行调整和缩放。
• 响应式布局：通过调整 viewBox 可以实现 SVG 图形在不同屏幕尺寸下的自适应布局。

总结

通过 SVG 的 viewBox 属性，我们可以定义图形在用户坐标系统中的显示区域和缩放比例，从而实现图形的缩放和自适应布局。在 SVG 开发中，掌握和灵活运用 viewBox 属性是非常重要的。

参考链接：

• MDN - viewBox