SVG viewBox - 在2个方向上缩放

Question

我有以下嵌套元素：

<div>
<svg viewBox='0 0 240 60' preserveAspectRatio='xMidYMid meet'>
<rect width='240' height='60'></rect>
</svg>
</div>

我使用viewBox启用SVG来填充整个div容器。但是我想让它在两个方向上扩展。因此，它可以填充div的以下两种尺寸：

height = 120，width = 480 height = 120，width = 700

因此，如果高度和宽度都是缩放比例，或者如果只是宽度比例，它会缩放。

Answer 1

要允许SVG在两个方向上缩放（并且松开宽高比），您必须使用preserveAspectRatio='none'。