Doi技术团队

在默认情况下，svg 的内部标尺是以像素作为单位的，比如说我现在有一个 svg 容器，我要在他的内部画一个圆，代码如下：

<svg style="width:100%;height:100%">
  <circle cx="100" cy="150" r="80" fill="#000"></circle>
</svg>

可以看到圆心的位置是相对于容器左上角的，即使这个容器缩放了，圆心的位置依然不会改变，我想让图案随着容器缩放那怎么办？难道需要监听 svg 尺寸变化，然后动态设置圆心位置？

这个时候就需要使用 viewBox 了，viewBox 是决定了 svg 容器内部的尺寸，他带来了一个新的单位，这个单位不表示确切的尺寸，他是可变的，格式为 viewBox="minX minY width height"，他会将 width 和 height 在容器元素尺寸上做映射，比方说：

<svg style="width:100%;height:100%" viewBox="0 0 400 500"></svg>

在这个例子中容器元素的尺寸是宽 100%，高 100%，通过 viewBox，我将他的宽高分别设置为 400 单位和 500 单位，这个时候自定义单位与容器尺寸的关系如下：

1 单位宽度 = 容器的宽度 / (400 + minX)
1 单位高度 = 容器的高度 / (500 + minY)

例子中的 minX 与 minY 都是 0

设置完 viewBox 后，我们可以认为这个 svg 内部就是宽 400 高 500 单位的，圆心就在 (200, 250) 的位置上，一个单位对应多少像素这里不关心，可以理解成 svg 内部的百分比：

<svg style="width:100%;height:100%" viewBox="0 0 400 500">
  <circle cx="200" cy="250" r="80" fill="#000"></circle>
	<!-- 此时图案的大小、尺寸单位都会强制使用 viewBox 的自定义单位 -->
</svg>