1、SVG的世界、视野、视窗的概念
- 世界是无穷大的，
- 视野是观察世界的一个矩形区域
- 视窗是在浏览器上渲染SVG图像的区域
具体到代码是
- SVG代码定义世界
- viewBox, preserveAspectRatio控制视野
- width, height控制视窗
<svg xmlns="..."
width="800" height="600"
viewBox="0 0 400 300"
preserveAspectRatio="xMidYMid meet"
<!--SVG Content-->
</svg>
width和height
定义了视窗的大小。视窗就是svg在浏览器上显示的宽高
viewBox
参数1，2：视野在世界坐标系中的坐标x, y
参数3，4：视野的宽和高
preserveAspectRatio参数
- align
- none
- xMinYMin
- xMinYMax
...
- meetOrSlice
- meet 视窗能看见整个视野，如果视窗viewbox和svg比例不一样，就会出现空白
在xMidYMid情况下，选择meet;红框是视窗viewbox，绿框是视野
- slice 视野填满视窗，所以视窗可能只看到视野的一部分
在xMidYMid情况下，选择slice;红框是视窗viewbox，绿框是视野
网友评论