SVG的viewBox、width和height释义, 示例及代码

大猫会长

已于 2023-12-21 20:34:08 修改

阅读量524

点赞数 2

文章标签：前端

于 2023-12-21 20:33:44 首次发布

本文链接：https://blog.csdn.net/aexwx/article/details/135118201

版权

svg的是没有边界的，svg画布只是用于展示svg世界中某一个范围的内容，而对于超过了svg画布范围的内容，则会被遮挡。默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。

我们可以通过viewBox来修改默认的显示配置，viewBox由4个点组成，viewBox=“x, y, w, h”；其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。而w，h则是定义svg画布的视野区域；默认情况下viewBox=“0,0,width,height”

当w<width、h<height的时候，相当于是拉近了视野，视野小了，但实际显示的区域没有发生变化；这就会导致显示的图形变大，显示的区域变小。
当w>width、h>height的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。

效果图

<!DOCTYPE html>
<html>

<body>
  <svg width="200" height="200" viewBox="0 0 3000 3000" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" />
    <circle cx="50%" cy="50%" r="40" fill="white" />
  </svg>

  <svg width="200" height="200" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" />
    <circle cx="50%" cy="50%" r="40" fill="white" />
  </svg>
  <svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" />
    <circle cx="50%" cy="50%" r="40" fill="white" />
  </svg>
</body>

</html>