1.viewPort
表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。
<svg width="500" height="300"></svg>
上面的SVG代码定义了一个视区，宽500单位，高300单位。
注意这里的措辞是“单位”，不是“像素”。虽然说，width/height如果是纯数字，使用的就是“像素”作为单位的。
也就是说，上面SVG的视区大小就是500px * 300px.
当然，故弄“单位”这个措辞，潜台词就是你可以使用其他类型的单位，涵盖常见CSS单位：
单位 含义
em 相对于父元素的字体大小
ex 相对于小写字母"x"的高度
px 相对于屏幕分辨率而不是视窗大小：通常为1个点或1/72英寸
in inch, 表英寸
cm centimeter, 表厘米
mm millimeter, 表毫米
pt 1/72英寸
pc 12点活字，或1/12点
% 相对于父元素。正常情况下是通过属性定义自身或其他元素
除了SVG本身，其他一些元素，例如<rect>的width/height属性也可以使用上面的这些单位，也是默认单位是像素。
2.viewBox属性
1.例子：
<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>
如果不看viewBox, 你一定会觉得诧异——SVG尺寸明明有400*300像素，而小小的<rect>大小只有其1/20，但是显示出来的却占据了半壁江山！不科学啊！
OK, 之所以小小矩形大显神威就是这里的viewBox起了推波助澜的作用。
viewBox值有4个数字：
viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度
viewBox顾名思意是“视区盒子”的意思，好比在说：“SVG啊，要不你就让我铺满你吧~”
更形象的解释就是：SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！
3. preserveAspectRatio
1.上面的例子，SVG的宽高比正好和viewBox的宽高比是一样的，都是4:3. 显然，实际应用viewBox不可能一直跟viewport穿同一条开裆裤。此时，就需要preserveAspectRatio出马了，此属性也是应用在<svg>元素上，且作用的对象都是viewBox。
preserveAspectRatio属性的值为空格分隔的两个值组合而成。例如，上面的xMidYMid和meet.
第1个值表示，viewBox如何与SVG viewport对齐；第2个值表示，如何维持高宽比（如果有）。
其中，第1个值又是由两部分组成的。前半部分表示x方向对齐，后半部分表示y方向对齐。家族成员如下：
值 含义
xMin viewport和viewBox左边对齐
xMid viewport和viewBox x轴中心对齐
xMax viewport和viewBox右边对齐
YMin viewport和viewBox上边缘对齐。注意Y是大写。
YMid viewport和viewBox y轴中心点对齐。注意Y是大写。
YMax viewport和viewBox下边缘对齐。注意Y是大写。
x, y自由合体就可以了，如：
xMaxYMax
xMidYMid
2.preserveAspectRatio属性第2部分的值支持下面3个：
值 含义
meet 保持纵横比缩放viewBox适应viewport
slice 保持纵横比同时比例小的方向放大填满viewport
none 扭曲纵横比以充分适应viewport
首先，看下SVG代码：
<svg width="400" height="200" viewBox="0 0 200 200" style="border:1px solid #cd0000;">
<rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>
截取SVG左边一半(200正好宽度400的一般)作为视区，里面有个150*150的红色矩形。
image.png
- 如果是meet效果，代码如下：
<svg width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
<rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>
image.png
3.表现原理为：SVG宽400, 高200，viewBox宽200, 高200. x横轴比例是2, y纵轴比例是1. meet的作用是让viewBox等比例的同时，完全在SVG的viewport中显示。这里，最小比例是纵向的1，所以，实际上viewBox并没有任何的缩放。
我们只要对viewBox属性值做一点小小的修改（200→300），就可以感受到缩放了：
<svg width="400" height="200" viewBox="0 0 200 300" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
<rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>
image.png
接下来的都差不多了，可以自己尝试。
网友评论