svg 中的 viewBox 是什么?

  |   0 评论   |   0 浏览   |   Erioifpud

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

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

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

rOSIY9.gif

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

<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 内部就是宽 400500 单位的,圆心就在 (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>

rOS5FJ.gif


标题:svg 中的 viewBox 是什么?
作者:Erioifpud
地址:https://blog.doiduoyi.com/articles/1609316672602.html

评论

发表评论