揭开 viewBox 神秘面纱：轻松掌握 SVG 坐标变换

一文搞懂 viewBox 的坐标变换

引言

在使用可缩放矢量图形 (SVG) 时，viewBox 是一个至关重要的属性，它定义了 SVG 绘图的可见区域和坐标系统。理解 viewBox 的坐标变换对于有效利用 SVG 至关重要，因为它允许您控制图形在页面上的位置和大小。

什么是 viewBox

viewBox 表示了一个矩形区域，其中包含 SVG 绘图的可见部分。它由四个数字组成，每个数字代表矩形的左上角坐标 (x)、宽度 (width)、高度 (height) 和右下角坐标 (y)。例如，viewBox="0 0 500 300" 表示一个从左上角坐标 (0, 0) 开始，宽 500px、高 300px 的矩形区域。

坐标变换

viewBox 坐标变换是一种将 SVG 绘图坐标系统从其原始坐标空间转换到可视区域坐标空间的过程。此变换允许您调整和放置图形，而无需更改图形本身的坐标。

缩放

viewBox 坐标变换的一种常见类型是缩放。您可以使用 transform="scale(sx, sy)" 属性缩放图形。其中，sx 和 sy 分别表示 x 和 y 方向的缩放因子。例如，transform="scale(2, 3)" 将图形在 x 方向放大 2 倍，在 y 方向放大 3 倍。

平移

平移是另一种类型的 viewBox 坐标变换，它允许您将图形移动到可视区域内的不同位置。您可以使用 transform="translate(tx, ty)" 属性平移图形。其中，tx 和 ty 分别表示 x 和 y 方向的平移量。例如，transform="translate(50, 100)" 将图形向右移动 50px，向下移动 100px。

旋转

旋转是 viewBox 坐标变换的另一种类型，它允许您将图形围绕其中心旋转。您可以使用 transform="rotate(angle)" 属性旋转图形。其中，angle 是以度为单位的旋转角度。例如，transform="rotate(45)" 将图形旋转 45 度。

实例

以下是一个展示 viewBox 坐标变换的示例 SVG 代码：

<svg width="500px" height="300px" viewBox="0 0 1000 600">
  <rect width="100px" height="100px" fill="red" transform="translate(100, 100) rotate(45) scale(2, 1)" />
</svg>

在这个示例中，viewBox="0 0 1000 600" 定义了 SVG 绘图的可见区域为一个从左上角坐标 (0, 0) 开始，宽 1000px、高 600px 的矩形区域。矩形元素的 transform="translate(100, 100) rotate(45) scale(2, 1)" 属性将矩形向右移动 100px，向下移动 100px，旋转 45 度，并在 x 方向放大 2 倍，在 y 方向放大 1 倍。

结论

理解 viewBox 的坐标变换对于有效利用 SVG 至关重要。它使您能够控制图形在页面上的位置和大小，并创建动态且交互式的 SVG 图像。通过掌握这些变换，您可以增强您的 SVG 技能并创建令人惊叹的图形。