Question

诚然，我是SVG的新手，但是我尝试过以下几种不一样的代码变体。我只是想扩展SVG形状和图像以填充页面宽度。我也想缩短身高。我的目标是使它成为网站标题/横幅（上面带有文字/徽标的模糊）。

任何帮助将不胜感激。 TIA！

<html>

<style>

body{background-color: black;
}

div {
    width: 100%;
    height: auto;

}
svg {
    max-width: 100%;
    height: auto;
}

</style>
</head>

<body>

<div>
<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice">
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
        <!--<image xlink:href="https://i.ebayimg.com/images/g/RnUAAOSwG1JakMvr/s-l1600.jpg" x="0" y="0" width="100%" height="680" />-->
        <image  xlink:href="https://images.furnituredealer.net/img/collections%2Fsignature_design_by_ashley%2Fdarcy%207500_75000-lsg-b5.jpg" x="0" y="0" width="100%" height="680" />
    </pattern>
  </defs>
  <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>

</svg>
</div>
</body>
</html>

Answer 1

主要只需要将宽高比的保留设置调整为xMidYMax slice，请参见示例并希望对您有所帮助。干杯！

body{
  background-color: black;
}

svg {
  position: absolute;
  top: 0; right: 0; left: 0;
}

<svg viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice">
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
        <image preserveAspectRatio="xMidYMid slice"  xlink:href="https://images.furnituredealer.net/img/collections%2Fsignature_design_by_ashley%2Fdarcy%207500_75000-lsg-b5.jpg" x="0" y="0" width="100%" height="100%" />
    </pattern>
  </defs>
  <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>

Answer 2

克里斯说得对，您需要将宽高比保留设置为xMidYMax slice。

preserveAspectRatio="xMidYMax slice"

但是他错过了固定高度370px的部分。对于此用例，最好使用position: relative和overflow: hidden

设置包装器

这里是：

body{
  background-color: grey;
  margin: 0;
  padding: 0;
}
.wrapper {
  position: relative;
  width: 100%;
  height: 370px;
  overflow: hidden;
  background: green;
}
.wrapper svg {
  position: absolute;
  top: 0; right: 0; left: 0;
}

<body>
  <div class="wrapper">
      <svg viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice">
        <defs>
          <pattern id="img1" patternUnits="userSpaceOnUse" width="101%" height="101%">
              <image preserveAspectRatio="xMidYMid slice"  xlink:href="https://images.furnituredealer.net/img/collections%2Fsignature_design_by_ashley%2Fdarcy%207500_75000-lsg-b5.jpg" x="0" y="0" width="100%" height="100%" />
          </pattern>
        </defs>
        <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
      </svg>
  </div>
  <h1> Hello World! </h1>
</body>

我添加了一些颜色和文字以使其生动。

我被困试图用SVG填充页面宽度

2 个答案: