svg 中的 viewBox 是什么?
在默认情况下,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>