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

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.mzph.cn/news/147384.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！