12. SVG 的viewBox属性详解

SVG viewBox属性详解

在SVG中，viewBox属性是一个非常强大的特性，它允许我们创建可缩放的矢量图形。这个属性可以让我们定义一个画布区域来展示SVG内容，并且可以控制这个区域的缩放和移动，SVG内容只在这个区域内进行绘制。这个属性对于实现图形的响应式设计至关重要。

viewBox属性的原理

viewBox属性定义了SVG元素内部的坐标系统。它由四个参数组成：min-x, min-y, width, 和 height。这些参数共同定义了一个矩形区域，这个区域就是SVG内容的可视区域。可以把viewBox 看作是一个相机，SVG画布是被拍照的内容，它是无限大的，viewBox用来对SVG画面进行照相，只能在HTML页面里显示出viewBox，也就是相片里的内容。

参数解释

• min-x 和 min-y 定义了可视区域的起始点，通常这个点是(0,0)。
• width 和 height 定义了可视区域的大小。

使用方式

viewBox属性使得SVG图形能够独立于它们被展示的区域大小。通过改变viewBox的值，我们可以控制SVG的缩放和平移。

缩放

当viewBox的width和height与SVG元素的width和height属性不一致时，会发生缩放。

平移

通过改变min-x和min-y的值，可以实现内容的平移。

示例与代码注释

让我们通过几个示例来看看viewBox在不同场景下的效果。

示例1: 缩放

<svg width="200" height="200" viewBox="0 0 100 100">
  <!-- SVG content goes here -->
  <!-- 此设置将SVG内容缩放两倍 -->
</svg>

在这个例子中，viewBox定义了一个100x100的区域，而SVG元素的大小是200x200，因此内容会被等比例放大两倍。

示例2: 平移

<svg width="200" height="200" viewBox="50 50 100 100">
  <!-- SVG content goes here -->
  <!-- 此设置将内容向右下方平移50个单位 -->
</svg>

在这个例子中，min-x和min-y被设置为50，这意味着SVG内容会从画布的(50,50)点开始绘制，实现了内容的平移。

示例3: 组合使用

<svg width="200" height="200" viewBox="25 25 50 50">
  <!-- SVG content goes here -->
  <!-- 此设置将内容向右下方平移25个单位，并放大四倍 -->
</svg>

在这个例子中，viewBox同时实现了内容的平移和缩放。内容首先向右下方平移25个单位，然后被放大四倍以填满200x200的SVG元素。

preserveAspectRatio属性概述

在SVG图形中，preserveAspectRatio属性扮演着至关重要的角色。它决定了当SVG元素的视窗（viewport）和viewBox的宽高比不匹配时，SVG内容应如何缩放和对齐。

preserveAspectRatio属性可以接受多种不同的值，每个值都会影响SVG内容的缩放和对齐方式。这个属性的值由两部分组成：对齐方式和缩放行为。第一个参数是必须的第二个是可选的

对齐方式

对齐方式决定了SVG内容在视窗中的位置。它可以是以下任意一个，代表viewBox与容器的位置关系：

• none：不保留长宽比，直接拉伸以适应视图框。
• xMinYMin：在视图框的左下角对齐内容的左下角。
• xMidYMin：在视图框的中间水平位置和左边垂直位置对齐内容的相应位置。
• xMaxYMin：在视图框的右下角对齐内容的右下角。
• xMinYMid：在视图框的左边水平位置和中间垂直位置对齐内容的相应位置。
• xMidYMid：在视图框的中心对齐内容的中心。
• xMaxYMid：在视图框的右边水平位置和中间垂直位置对齐内容的相应位置。
• xMinYMax：在视图框的左下角对齐内容的左上角。
• xMidYMax：在视图框的中间水平位置和右边垂直位置对齐内容的相应位置。
• xMaxYMax：在视图框的右下角对齐内容的右上角。

缩放行为

缩放行为决定了内容如何缩放以适应视窗。它可以是以下任意一个，SVG将优先采纳压缩比较小的作为最终压缩比，meet 是默认参数

• meet：保持宽高比，内容完全适应视窗。
• slice：保持宽高比，内容覆盖整个视窗，可能会有部分内容被裁剪。

示例与代码注释

让我们通过一些示例来详细了解preserveAspectRatio属性的不同效果。

示例1: none

当preserveAspectRatio设置为none时，SVG内容将被拉伸以填满整个视窗，不考虑宽高比。

<svg width="200" height="100" viewBox="0 0 50 50" preserveAspectRatio="none">
  <!-- SVG content goes here -->
  <!-- 此设置会导致内容拉伸以填满视窗 -->
</svg>

示例2: xMidYMid meet

此设置将保持内容的宽高比，同时内容会在视窗中居中显示。

<svg width="200" height="200" viewBox="0 0 50 50" preserveAspectRatio="xMidYMid meet">
  <!-- SVG content goes here -->
  <!-- 此设置会保持宽高比，并使内容居中 -->
</svg>

示例3: xMinYMin slice

此设置将保持内容的宽高比，内容会从视窗的左上角开始显示，并覆盖整个视窗，可能会有部分内容被裁剪。

<svg width="200" height="200" viewBox="0 0 50 50" preserveAspectRatio="xMinYMin slice">
  <!-- SVG content goes here -->
  <!-- 此设置会保持宽高比，内容从左上角开始，可能裁剪部分内容 -->
</svg>

​