Fix SVG Höhe, aber horizontale Skalierung

Question

Ich habe ein SVG-Bild, wo ich brauche eine konsistente Höhe, aber lassen Sie es horizontal mit dem Sichtfenster wachsen. Ich habe in das preserveAspectRatio Attribut geschaut, aber kann es nichts tun. Ich habe das Gefühl, dass andere Probleme mit meinen SVG-Attributen dies verhindern, aber ich bin sehr neu in SVG und muss erst noch herausfinden, was das Problem und/oder den Konflikt verursacht. Ich habe auch mehrere verschiedene Einstellungen mit dem CSS ohne Erfolg ausprobiert.

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

Es ist nicht ganz klar, welche Wirkung Sie nach, aber vielleicht

preserveAspectRatio="none" 

gibt den Effekt, den Sie wollen?

.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>

Demo: https://jsfiddle.net/cdsLb0wd/3/

Oder vielleicht wollten Sie das Seitenverhältnis des SVG gleich bleiben, und die SVG nimmt die gesamte Breite. Dann sollten wir nur einen Teil davon basierend auf der Breite betrachten. In diesem Fall sollten Sie verwenden:

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>

Demo: https://jsfiddle.net/cdsLb0wd/4/