Web前端
用户坐标系。因此图形在视窗中定位：
1.整个viewBox适应视窗。
2.保持viewBox的宽高比。viewBox没有被拉伸来覆盖视窗区域。
3.viewBox在视窗中水平垂直居中。
这是默认表现。那用什么控制表现呢?如果我们想改变视窗中viewBox的位置呢?这就需要用到preserveAspectRatio属性了。
preserveAspectRatio属性
preserveAspectRatio属性强制统一缩放比来保持图形的宽高比。
如果你用不同于视窗的宽高比定义用户坐标系，如果像我们在之前的例子中看到的那样浏览器拉伸viewBox来适应视窗，宽高比的不同会导致图形在某些方向上扭曲。所以如果上一个例子中的viewBox被拉伸以在所有方向上适应视窗，图形看起来如下：
当给viewBox设置0 0 200 300的值时扭曲显而易见(显然这很不理想)，这个值小于视窗尺寸。我故意选择这个尺寸从而让viewBox匹配鹦鹉边界盒子的尺寸。如果浏览器拉伸图像来适应整个视窗，看起来会像下面这样：
皓眸大前端
preserveAspectRatio属性让你可以在保持宽高比的情况下强制统一viewBox的缩放比，并且如果不想用默认居中你可以声明viewBox在视窗中的位置。
preserveAspectRatio语法
preserveAspectRatio的官方语法是：
- preserveAspectRatio = defer? <align> <meetOrSlice>?
它在任何建立新viewport的元素上都有效(我们会在这个系列的下一部分讨论这个问题)。
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(默认值)
基于以下两条准侧尽可能缩放元素：
保持宽高比
整个viewBox在视窗中可见
在这个情况下，如果图形的宽高比不符合视窗，一些视窗会超出viewBox的边界(即viewBox绘制的区域会小于视窗)。(在viewBox一节查看最后的例子。)在这个情况下，viewBox的边界被包含在viewport中使得边界满足。
这个值类似于background-size: contain。背景图片在保持宽高比的情况下尽可能缩放并确保它适合背景绘制区域。如果背景的长宽比和应用的元素的长宽比不一样，部分背景绘制区域会没有背景图片覆盖。
slice
在保持宽高比的情况下，缩放图形直到viewBox覆盖了整个视窗区域。viewBox被缩放到正好覆盖视窗区域(在两个维度上)，但是它不会缩放任何超出这个范围的部分。换而言之，它缩放到viewBox的宽高可以正好完全覆盖视窗。
在这种情况下，如果viewBox的宽高比不适合视窗，一部分viewBox会扩展超过视窗边界(即，viewBox绘制的区域会比视窗大)。这会导致部分viewBox被切片。
你可以把这个类比为background-size: cover。在背景图片的情况中，图片在保持本身宽高比(如何)的情况下缩放到宽高可以完全覆盖背景定位区域的最小尺寸。
所以，meetOrSlice被用来声明viewBox是否会被完全包含在视窗中，或者它是否应该尽可能缩放来覆盖整个视窗，甚至意味着部分的viewBox会被“slice”。
例如，如果我们声明viewBox的尺寸为200*300，并且使用了meet和slice值，保持align值为浏览器默认，每个值的结果会看起来如下：
align参数使用9个值中的一个或者为none。任何除none之外的值都用来保持宽高比缩放图片，并且还用来在视窗中对齐viewBox。
当使用百分比值时，align值类似于background-position。你可以把viewBox当做背景图像。通过align定位和background-position的不同在于，不同于通过一个与视窗相关的点来声明一个特定的viewBox值，它把具体的viewBox“轴”和对应的视窗的“轴”对齐。
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-80-745-1.html
