如何在 SVG 中保留裁剪的图像纵横比无纵横比

Question

我试图确保 SVG 分隔器的高度和宽度是响应式的，但也将图像剪辑到其中一个层以获得这种效果：这里

我现在遇到的问题是，使用 100vh 和 100vw 在垂直和水平方向上做出响应的唯一方法是图像挤压和倾斜。 有没有办法在保持图像响应性的同时保持图像的纵横比？ 我在这里缺少一些基本的东西吗？

我当前尝试的链接：

https://codepen.io/Tay8472/pen/mdLpOqw

下面的代码片段：

<svg id="test_clip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1069" preserveAspectRatio="none">
    <clipPath id="mask_cc_1">
        <path d="M0,1025.25c246.56-43.45,560.46-69.79,891-10.97,34.54,6.15,49.46,9.7,83.74,15.91,219.17,39.72,525.11,60.44,945.26,4.92V0H0V1025.25Z"/>
    </clipPath>
    <image id="test_cc" class="image__svg-image" width="110%" height="110%" clip-path="url(#mask_cc_1)" x="-35%" preserveAspectRatio="xMinYMin" xlink:href="https://www.cupcakebowls.com/wp-content/uploads/2022/09/overlay_cupcake_v1.svg" />
</svg>

<!-- <svg id="test_clip_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 506" >
    
</svg> -->

<svg id="home_gradient_backdrop" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1069" preserveAspectRatio="none">
    <defs>
        <style>.home_gradient_overlay{fill:url(#radial-gradient);}</style>
        <radialGradient id="radial-gradient" cx="1303.67" cy="727.5" fx="1303.67" fy="727.5" r="1555.2" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#f5428d"/>
            <stop offset=".3" stop-color="#da40a1"/>
            <stop offset=".95" stop-color="#953dd5"/>
            <stop offset="1" stop-color="#903dda"/>
        </radialGradient>
    </defs>
    <path class="home_gradient_overlay" d="M0,1025.25c246.56-43.45,560.46-69.79,891-10.97,34.54,6.15,49.46,9.7,83.74,15.91,219.17,39.72,525.11,60.44,945.26,4.92V0H0V1025.25Z"/>
</svg>

<svg id="home_pink_secondary_backdrop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" preserveAspectRatio="none">
    <defs>
        <style>.home_pink_backdrop{fill:#ffaed0;}</style>
    </defs>
    <path class="home_pink_backdrop" d="M0,1080c227-61.03,475.1-86,816-67.91,146.98,7.8,214.97,30.58,381,43.87,299.08,23.93,552.7,2.08,723-20.84V0H0V1080Z"/>
</svg>