viewPort
表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。
<svg width="500" height="300"></svg>
在SVG中，值可以带单位也不可以不带。一个不带单位的值可以在用户空间中通过用户单位声明。如果值通过用户单位声明，那么这个值的数值被认为和px单位的数值一样。这意味着上述例子将被渲染为500px*300px的视窗。
你也可以使用单位来声明值。SVG支持的长度单位有：em，ex，px，pt，pc，cm，mm，in和百分比。
ViewBox
viewbox的语法解释 viewBox值有4个数字：
viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度
iewbox 顾名思义，就是视图盒子的意思，更形象的解释？没有
更形象的解释就是：SVG就像是我们的屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容、
<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
<rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>
可能有人就会问，不科学啊！，svg宽高400X300，rect 宽高 20X15，怎么结果看到rect这么大的。
其实呢，这都是viewbox的功劳。
如果没有viewBox, 应该是长这样的：
viewBox="0,0,40,30"相当于在SVG上圈了下图左上角所示的一个框框：
然后把这个框框，连同框框里的小矩形一起放大到整个SVG大小 ：
不知道大家想到没有，这其实就是一个缩放，把svg中0，0开始，宽40高40的区域，放大到宽400，高300来显示
好，换一种思路，我们直接把rect做缩放，不要viewBox 怎么能实现跟viewBox一样呢,就用我们上一章说的transform:scale
<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
<rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>
<svg width="400" height="300" style="border:1px solid #cd0000;">
<rect x="10" y="5" width="20" height="15" fill="#cd0000" transform="scale(10)"/>
</svg>
是一样吧？，为什么是scale(10)呢，是因为上面viewBox 中宽高跟 svg宽高比例是10。
如果我们改变viewbox前面2个参数：
<svg width="400" height="300" viewBox="5,5,40,30" style="border:1px solid #cd0000;">
<rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>
就相当于做了一个位移：
transform="translate(-5 -5)"
就是将5,5开始宽40，高30的内容区域显示在宽400px，高300px的svg中。
preserveAspectRatio
preserveAspectRatio的官方语法是：
preserveAspectRatio = defer? <align> <meetOrSlice>?
defer声明是可选的，并且只有当你在<image>上添加preserveAspectRatio才被用到。用在任何其他元素上时它都会被忽略。<images>本身不在这篇文章的讨论范围，我们暂时跳过defer这个选项。
align参数声明是否强制统一放缩，如果是，对齐方法会在viewBox的宽高比不符合viewport的宽高比的情况下生效。
如果align值设为none，例如：
preserveAspectRatio = "none" 图形不在保持宽高比而会缩放来适应视窗，像我们在上面两个例子中看到的那样。
其他所有preserveAspectRatio值都在保持viewBox的宽高比的情况下强制拉伸，并且指定在视窗内如何对齐viewBox。我们会简短介绍align的值。
最后一个属性，meetOrSlice也是可选的，默认值为meet。这个属性声明整个viewBox在视窗中是否可见。如果是，它和align参数通过一个或多个空格分隔。例如：
preserveAspectRatio = "xMinYMin slice" 这些值第一眼看起来也许很陌生。为了让它们更易于理解和熟悉，你可以把meetOrSlice的值类比于background-size的contain和cover值;它们非常类似。meet类似于contain，slice类似于cover。
meet（默认值）
基于以下两条准侧尽可能缩放元素：
1.保持宽高比 2.整个viewBox在视窗中可见
这个值类似于background-size: contain。背景图片在保持宽高比的情况下尽可能缩放并确保它适合背景绘制区域。如果背景的长宽比和应用的元素的长宽比不一样，部分背景绘制区域会没有背景图片覆盖。
slice
可以把这个类比为background-size: cover。在背景图片的情况中，图片在保持本身宽高比（如何）的情况下缩放到宽高可以完全覆盖背景定位区域的最小尺寸。
前面的align只是用来对齐的
