我有一个SVG，我正尝试通过窗口视口缩小它。同时也被卡在窗口的底部文件夹中。
当前，如果您缩小窗口的宽度，SVG也将重新调整大小，但是由于它保持其长宽比，因此svg的高度会减小，这是我不希望的。我一直希望SVG的高度为100vh。
我尝试更改AspectRatio preserveAspectRatio:'xMidYMin slice'
它确实保持其大小，但是在调整浏览器大小时会被宽度裁剪。
我的SVG；
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2489 1800" width="2489" height="1800" preserveAspectRatio="xMidYMin slice" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);">
<defs>
<clipPath id="animationMask_oMFKjCmaS2">
<rect width="2489" height="1800" x="0" y="0"></rect>
</clipPath>
<clipPath id="cp_MJBYT3Jk">
<path d="M0,0 L1600,0 L1600,900 L0,900z"></path>
</clipPath>
<clipPath id="cp_3iMIjxYs">
<path d="M0,0 L1600,0 L1600,900 L0,900z"></path>
</clipPath>
<clipPath id="cp_LphEsRvd">
<path d="M0,0 L1600,0 L1600,900 L0,900z"></path>
</clipPath>
</defs>
<g clip-path="url(#animationMask_oMFKjCmaS2)">
<g clip-path="url(#cp_LphEsRvd)" transform="matrix(1.551110029220581,0,0,1.551110029220581,1.6119384765625,10.00048828125)" opacity="1" style="display: block;">
<g transform="matrix(1,0,0,1,848,450)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(68,187,221)" fill-opacity="1" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -560,548 -560,548 C-560,548 -560,788 -560,788 C-560,788 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -560,548 -560,548 C-560,548 -560,788 -560,788 C-560,788 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(68,187,221)" fill-opacity="1" d="M0 0"></path>
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path>
</g>
</g>
</g>
<g clip-path="url(#cp_3iMIjxYs)" transform="matrix(1.551110029220581,0,0,1.551110029220581,-0.1380615234375,11.75048828125)" opacity="1" style="display: block;">
<g transform="matrix(0.4881500005722046,0,0,0.4881500005722046,980,560)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(255,106,30)" fill-opacity="1" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(68,187,221)" fill-opacity="1" d="M0 0"></path>
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path>
</g>
</g>
<g transform="matrix(1,0,0,1,800,450)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(237,100,30)" fill-opacity="1" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
</g>
</g>
</g>
<g clip-path="url(#cp_MJBYT3Jk)" transform="matrix(1.551110029220581,0,0,1.551110029220581,-4.1380615234375,10.75048828125)" opacity="1" style="display: block;">
<g transform="matrix(0.39351001381874084,0,0,0.39351001381874084,586,674)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(255,93,184)" fill-opacity="1" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
</g>
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(255,93,184)" fill-opacity="1" d="M0 0"></path>
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path>
</g>
</g>
<g transform="matrix(0.7595199942588806,0,0,0.7595199942588806,464,582)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
<path fill="rgb(236,83,169)" fill-opacity="1" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
<path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
</g>
</g>
</g>
</g>
</svg>
CodePen示例- https://codepen.io/SamXronn/pen/MxvPER