一.世界、视野、视窗
视野：视野是观察SVG世界的一个矩形区域，是由svg标签的viewBox和preserveAspectRadio属性控制，矩形区域实际上只是表示视野，是我们能看到的那个部分。
世界：svg标签之间的代码，我们能绘制的是一个无穷大的世界，世界是客观的，只要定义了svg世界的内容，世界就是确定的。
视窗：svg标签的width、height属性控制，其实就是viewport，表示的是SVG可见区域的大小，或者可以想象成舞台的大小，画布大小。是浏览器开辟出来用于渲染svg内容的区域。
二.四个坐标系
我们用的是笛卡尔直角坐标系。但是不同于数学中的坐标系，X轴是向右的，但Y轴是向下的，旋转的话是从X轴正方向向Y轴正方向旋转，也就是顺时针旋转。
用户坐标系（User Coordinate）
SVG世界的坐标系，上面所说的viewBox就是使用该坐标系。用户坐标系是最原始的，其余的坐标系都是由其产生的。
自身坐标系（Current Coordinate）
每个图形或者图形分组自身的坐标系
前驱坐标系（Previous Coordinate）也就是直接父容器的坐标系
参考坐标系（Reference Coordinate）
三.viewBox属性
代码：
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300"
viewBox="0,0,40,30" style="border: 1px solid blue;">
<rect x="10" y="5" width="20" height="15" fill="pink"></rect>
</svg>
</body>效果图
效果图展示，rect定义的矩形占据了SVG画布大半的尺寸，是什么原因导致的呢？—就是viewBox起的作用。
viewBox属性语法：
viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度。viewBox就是视野的代言人，更形象的解释是：SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！
分步解释：
- 如果没有viewBox, 应该是长这样的：
此时rect只有整个SVG画布的1/20。 - viewBox=”0,0,40,30”相当于在SVG上圈了下图左上角所示的一个框框：
- 然后把这个框框，连同框框里的小矩形一起放大到整个SVG大小（如下gif）:
最后我们看到的是把viewBox铺满SVG画布后的效果。
上面这个例子是基于SVG的宽高比正好和viewBox的宽高比一致的情况下实现的。
当宽高比不一致时怎么解决，这就引出了preserveAspectRatio属性。
四.preserveAspectRatio属性
英文直译：维持外观比例。就是当宽高比不一致时，如何设置preserveAspectRatio的属性值，来达到我们想要的效果展示。这个属性也是应用在svg元素上，且作用的对象都是viewBox。
preserveAspectRatio属性语法：
preserveAspectRatio="xMidYMid meet"
这也是preserveAspectRatio属性默认的属性值属性值由空格分隔的两部分组成，第一部分表示viewBox如何与SVG viewport对齐，第二部分表示如何维持宽高比。
5895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
