Question

我有一个SVG图像，我需要保持一致的高度，但允许它与视图窗口一起水平增长。我查看了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/

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

1 个答案: