当前位置：首页 > article >正文

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

article 2024/11/18 7:47:08

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>

查看全文

http://www.kler.cn/a/132961.html