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

2023-12-21 21:58:18

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>

文章来源:https://blog.csdn.net/aexwx/article/details/135118201
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。