SVG 奇淫巧技：详解 ViewBox 和 ViewPort

2023-09-18 15:25:17

揭秘 SVG 的奇淫巧技：viewBox 和 viewPort 的奥秘

SVG，全称可缩放矢量图形（Scalable Vector Graphics），是一种强大且通用的图形格式，广泛用于网络和移动设备中。它允许我们创建清晰、可缩放的图像，而不会出现失真或质量损失。在这个博文中，我们将深入探讨 SVG 中两个至关重要的属性：viewBox 和 viewPort，以及它们如何共同塑造 SVG 内容的显示方式。

viewBox：定义 SVG 的工作区域

想象一下一幅画。画的边缘就是它的视盒（viewBox），它决定了画的尺寸和可见范围。类似地，在 SVG 中，viewBox 属性定义了 SVG 内容的视盒。它是一个矩形区域，指定了坐标系的原点、单位以及内容的显示部分。

viewBox 属性有四个值，分别代表视盒的左上角坐标 (x)、顶部坐标 (y)、宽度 (width) 和高度 (height)。

<svg viewBox="0 0 100 100">
  ...SVG 内容...
</svg>

在这个例子中，viewBox 的值为 "0 0 100 100"，表示视盒的左上角坐标为 (0, 0)，宽度和高度都为 100。这表示 SVG 内容将显示在 100x100 的矩形区域内。

viewPort：定义 SVG 的显示区域

视盒和视口（viewPort）不同。视口是一个逻辑坐标系，其原点位于浏览器窗口或其他容器的左上角。它定义了 SVG 内容在浏览器中显示的区域。视口的大小由浏览器的窗口大小决定。

viewBox 和 viewPort 的关系

viewBox 和 viewPort 之间的关系可以用一幅画和它的画框来比喻。viewBox 定义了画的区域，而 viewPort 定义了画框的区域。当 SVG 内容显示时，浏览器会将 viewBox 中的坐标转换为视口坐标。这允许 SVG 内容在不同大小的视口中进行缩放和平移，而不会失真。

应用场景

viewBox 和 viewPort 在 SVG 中有广泛的应用，包括：

缩放和平移： 通过调整视口的 width 和 height，可以缩放和平移 SVG 内容，而无需更改 viewBox。
响应式设计： SVG 可以通过调整 viewBox 和 viewPort 来适应不同尺寸的屏幕。
创建可缩放的图标： 通过使用 viewBox，可以创建可缩放的矢量图标，而不会失真。
裁剪 SVG 内容： 通过设置 viewBox，可以裁剪 SVG 内容的特定区域进行显示。

示例

以下代码演示了如何使用 viewBox 和 viewPort 缩放和平移 SVG 图像：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <svg viewBox="0 0 100 100" width="200" height="200">
    <rect x="0" y="0" width="100" height="100" fill="blue" />
  </svg>
</body>
</html>