css - 修复 SVG 高度但允许水平缩放

Question

我有一个 SVG 图像，我需要保持一致的高度，但允许它随着 View 窗口水平增长。我调查了 preserveAspectRatio属性，但不能让它做任何事情。我感觉我的 SVG 属性还有其他问题阻止了这种情况，但我对 SVG 还很陌生，还没有弄清楚是什么导致了问题和/或冲突。我还尝试了多种不同的 CSS 设置，但均未成功。

https://jsfiddle.net/cdsLb0wd/2/

.scoop__wrapper {
  background-color: black;
  overflow: hidden;
  top: 674px;
  //height: 382px;
  //width: 100%;
}

.combined-shape__scoop {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  z-index: 2;
}

<div class="scoop__wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="392" viewBox="0 0 1440 392">
        <defs>
            <path id="b" d="M1440 .826V620H0V.826v22.826C241.31 82.55 481.31 112 720 112s478.69-29.45 720-88.348V.826z"/>
            <filter id="a" width="106.9%" height="116%" x="-3.4%" y="-8.5%" filterUnits="objectBoundingBox">
                <feOffset dy="-3" in="SourceAlpha" result="shadowOffsetOuter1"/>
                <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="16"/>
                <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
            </filter>
        </defs>
        <g fill="none" fill-rule="evenodd" transform="translate(-1 9)">
            <use fill="#000" filter="url(#a)" xlink:href="#b"/>
            <use fill="#FFF" xlink:href="#b"/>
        </g>
    </svg>

Answer 1

目前还不清楚你到底想要什么效果，但也许

preserveAspectRatio="none"

给出你想要的效果？

.scoop__wrapper {
    background-color: black;
}

<div class="scoop__wrapper">
<svg width="100%" height="392" viewBox="0 0 1440 392" preserveAspectRatio="none">
    <defs>
        <path id="b" d="M1440 .826V620H0V.826v22.826C241.31 82.55 481.31 112 720 112s478.69-29.45 720-88.348V.826z"/>
        <filter id="a" width="106.9%" height="116%" x="-3.4%" y="-8.5%" filterUnits="objectBoundingBox">
            <feOffset dy="-3" in="SourceAlpha" result="shadowOffsetOuter1"/>
            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="16"/>
            <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
        </filter>
    </defs>
    <g fill="none" fill-rule="evenodd" transform="translate(-1 9)">
        <use fill="#000" filter="url(#a)" xlink:href="#b"/>
        <use fill="#FFF" xlink:href="#b"/>
    </g>
</svg>
</div>

演示:https://jsfiddle.net/cdsLb0wd/3/

或者您可能希望 SVG 的纵横比保持不变，并且 SVG 占据整个宽度。那么我们应该只根据宽度查看它的一部分。在这种情况下，您应该使用:

preserveAspectRatio="xMidYMin slice"

.scoop__wrapper {
    background-color: black;
}

<div class="scoop__wrapper">
<svg width="100%" height="392" viewBox="0 0 1440 392" preserveAspectRatio="xMidYMin slice">
    <defs>
        <path id="b" d="M1440 .826V620H0V.826v22.826C241.31 82.55 481.31 112 720 112s478.69-29.45 720-88.348V.826z"/>
        <filter id="a" width="106.9%" height="116%" x="-3.4%" y="-8.5%" filterUnits="objectBoundingBox">
            <feOffset dy="-3" in="SourceAlpha" result="shadowOffsetOuter1"/>
            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="16"/>
            <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
        </filter>
    </defs>
    <g fill="none" fill-rule="evenodd" transform="translate(-1 9)">
        <use fill="#000" filter="url(#a)" xlink:href="#b"/>
        <use fill="#FFF" xlink:href="#b"/>
    </g>
</svg>
</div>

演示:https://jsfiddle.net/cdsLb0wd/4/