svg viewBox和视口比例不匹配-preserveAspectRatio属性详解

1.viewBox属性

svg width和height：最终显示的区域
viewBox：画图的地方
最终就是吧viewBox里面所画的图按照相应的规则拉伸在svg的区域显示

2.preserveAspectRatio属性

preserveAspectRatio="alignment [meet|slice]"

第一个参数alignment（viewBox和视口的对齐方式）取值如下：

第二个参数取值：

• meet 说明符在图形超出视口时候会对图形适当缩小调整适配可用的空间
• slice 说明符直接裁剪超出视口的部分

preserveAspectRatio取值示例：

• preserveAspectRatio=“none”
  在 viewBox和视口宽高比不同时缩放图像，此时图像不会被等比例缩放，会被拉伸、挤压、变形。
• preserveAspectRatio=“xMidYMid meet” 这是默认取值
• preserveAspectRatio="xMinYMin slice "

3.简单举例

<svg version="1.1"
     baseProfile="full"
     width="600" height="300"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 40 30"
     style="border:1px solid #ff0000"
     >
  <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>

最后显示结果：

4.举例详解

其实就是先算出宽和高放大比例，这里宽放大了600/40 = 15倍，高放大了300/30 = 10倍，然后如果是meet就宽和高就统一放大较小的倍数（10倍），slice就是统一放大较大的倍数（15倍），之后按照对齐方式放置到svg中，slice超出视口的部分会被裁减。

5.改变preserveAspectRatio="xMinYMin slice"属性看看结果

分析：

这是viewBox和视口左上角对齐

6.改变preserveAspectRatio="xMaxYMax slice"属性看看结果

右下角对齐

7.改变preserveAspectRatio="xMidYMid slice"属性看看结果