Understanding ViewBox in SVG

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

width 和 height 属性

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

https://codepen.io/janice143/pen/dyrxvjO

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

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

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

viewBox属性

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

1
2
3
4
5

viewBox="x y width height"

or

viewBox="x,y,width,height"

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

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

请看下面这里例子：

https://codepen.io/janice143/pen/dyrxvjO

在这里例子中，我们限定了一个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

1
2
3
4
5
6
7

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

https://codepen.io/janice143/pen/dyrxvjO?editors=1100

2. 案例2

1
2
3
4
5
6
7

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

https://codepen.io/janice143/pen/dyrxvjO?editors=1100

3. 案例3

1
2
3
4
5
6
7

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

https://codepen.io/janice143/pen/dyrxvjO?editors=1100

4. 案例4

1
2
3
4
5
6
7

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

https://codepen.io/janice143/pen/dyrxvjO?editors=1100

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

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

总结

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

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

License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

Share