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