我被困在尝试用 SVG 填充页面宽度答案

【问题标题】：I'm stuck trying to fill page width with SVG我被困在尝试用 SVG 填充页面宽度
【发布时间】：2019-03-10 02:46:47
【问题描述】：

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

任何帮助将不胜感激。蒂亚！

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

【问题讨论】：

标签： html css image svg

【解决方案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>

【讨论】：

【解决方案2】：

Chris 是对的，您需要将纵横比保留设置为 xMidYMax 切片。

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>

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

【讨论】：

我喜欢你在这里所做的。在 ie 中工作，但 Chrome 未显示圆底
^^^^ 除此之外，它可以很好地满足我的需要。
您对 Chrome 为何不绘制圆底有任何想法吗？
好的，删除溢出：隐藏，现在可以工作了。再次感谢！