本文详细介绍了SVG的三个关键参数：viewport（可视区域）、viewBox（视口）和preserveAspectRatio（保持纵横比）。通过实例展示了它们如何影响SVG图形在页面中的显示，特别是viewBox如何实现图形的缩放以及preserveAspectRatio如何处理不同宽高比下的对齐和缩放方式。
SVG
基本参数
1、viewport
viewport指的是可视区域，通过x、y、width、height属性设置。可视区域听起来不太好理解，先看一下代码：
<svg x="0" y="0" width="500" height="300" style="border: 1px solid red;"></svg>
在页面中的效果：
与任何的html标签一样，svg标签在页面中也会占据一定的空间，svg标签在页面中所占的空间就是所谓的可视区域，利用svg绘制的各种形状的图形都只显示在该空间内。可以通过width和height用来设置svg元素的宽度和高度，属性值一般不带单位，默认单位是px。综上所述，可视区域就是svg标签的大小。
2、viewBox
如果没有viewBox属性，svg标签就与普通的html标签没有太大的差别，可以通过代码看一下：
<svg x="0" y="0" width="500" height
最低0.47元/天 解锁文章
1171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
