通俗理解SVG中的ViewBox

在SVG元素中，width和 height属性以及**viewBox**属性中的宽度（width）和高度（height）都可以影响SVG的布局，前者宽高和普通元素的宽高类似，比较好理解，但是viewBox中的宽高不好理解，本文会将viewBox属性讲清楚。

width 和 height 属性

我们先来理解简单的width和height属性，用法如下：

 <svg width="100" height="100">
  <rect width="100" height="100" fill="red" />
</svg>

<svg width="100" height="100">
  <rect width="50" height="50" fill="red" />
</svg>

<svg width="200" height="200" style="border: 1px solid black">
  <rect width="100" height="100" fill="red" />
</svg>

在这段代码中，我们通过css的background属性建立了一个间距为10px的网格坐标系统，左上角起始点为原点（0,0)，向右和向下分别为横向和纵向的正方向。

所以svg元素的width和height属性很好理解，这两个属性确定了元素相对于整个画布的绝对大小 ，里面的元素肯定局限在这两个属性限定的范围内。

在这个限定范围内，我们要对svg内的元素进行缩放，或者移动内部元素怎么办？这个时候就要用到viewBox属性。

viewBox属性

viewBox也是一个容器，有位置和大小。viewBox属性的用法如下：

viewBox="x y width height"

or

viewBox="x,y,width,height"

该属性内部有4个属性，可以用空格或者逗号进行分割。

• x, y 表示viewBox这个容器的左上角位置坐标（相对于svg元素的绝对位置）
• width, height表示viewBox这个容器的宽高

请看下面这里例子：

 <svg width="200" height="200">
  <rect width="100" height="100" fill="blue" />
</svg>

<svg width="200" height="200" viewBox="0 0 300 300">
  <rect width="100" height="100" fill="blue" />
</svg>

在这里例子中，我们限定了一个200 * 200 的区域，整个svg元素在这块区域内显示。svg内部的元素rect的宽高为100 * 100。

可以看到左右两个设置了viewBox和没有设置的差异。

在这个图的下面，我们又以viewBox的视角，画出了viewBox这个容器中元素的展示

可以发现，在viewBox视角下，元素的展示和限定在width和height内的展示一模一样，唯一的差别是前者进行另一个缩放，需要完全限制在width和height内部。

这就是viewBox的作用。

理解viewBox的SOP

所以我们可以这样理解svg的viewBox属性：

1. 根据viewBox的四个值确定viewBox的大小
2. 根据svg内部元素的宽高确定其在viewBox中的位置
3. 最后把上面二者结合的图像缩放到svg元素的宽高内

举一反三

我们在举一些例子来继续理解viewBox。

1. 案例1

<svg 
  width="100" 
  height="100" 
  viewBox="0 0 200 200"
>
  <circle cx="100" cy="100" r="50" />
</svg>

2. 案例2

<svg 
  width="200" 
  height="200" 
  viewBox="0 0 200 200"
>
  <circle cx="100" cy="100" r="50" />
</svg>

3. 案例3

<svg 
  width="200" 
  height="200" 
  viewBox="0 0 100 100"
>
  <circle cx="100" cy="100" r="50" />
</svg>

4. 案例4

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <circle cx="0" cy="0" r="50" />
</svg>

上面四个案例中，我们使用**蓝绿色底+紫色元素**画出了viewBox容器中的元素呈现，可以看到这个相对元素展示就是元素在绝对位置上的展示。

按照上述给出的理解步骤，我们很容易还原svg的图像展示。

总结

本文通过一些案例说明了svg元素中width、height 和viewBox属性的理解，其中，width和height属性控制SVG的物理尺寸，而viewBox属性则定义了一个内部的视图框架，允许内容在保持比例的前提下缩放以适应不同的物理尺寸。

• 无viewBox时 ：SVG的显示大小严格遵循width和height属性。图形的大小不会自动适应容器的大小变化。
• 有viewBox时 ：SVG内部的图形（在这个例子中是蓝色的正方形）会被缩放以适应指定的物理尺寸（200x200像素），而不失去比例或变形。这是因为viewBox提供了一种机制，允许SVG内容在不同尺寸的容器中灵活显示，同时保持其内部图形的正确比例和定位。

demo源代码

👇👇👇

codepen.io/janice143/p...