SVG preserveAspectRatio 终极理解

preserveAspectRatio: xMinYMin [meet slice none];

红框为viewBox=“0 0 100 200”；

meet 按viewBox 短边比例来缩放。

slice 按viewBox 长边比例来缩放。

preserveAspectRatio 就是控制viewBox裁剪下来的东西的位置和缩放的。

此时，viewBox 的内容为一个上半圆。

meet

xMidYMid meet (默认情况): 400 / 200 = 2 , 放大两倍

viewBox放大两倍后，w=400，h=200，在svgBox 里面，因此，xMidYMid控制了viewBox 的位置，两个盒子中线对齐。

这里viewBox裁剪以外的区域也会展示。

slice

xMidYMid slice: 300 /100 =3倍

viewBox放大后，svgBox 比viewBox小，因此，xMidYMid控制了svgBox的位置，两个盒子中线对齐

小结

preserveAspectRatio 的对象是viewBox最初裁剪的图像。

meet 和slice 可能会导致放大后viewBox比svgBox 大，此时也按对齐方式对齐即可。

附：

根据官网，此属性还可以用在其他svg元素上。

• <svg>
• <symbol>
• <image>
• <feImage>
• <marker>
• <pattern>
• <view>