用保留比率的背景图像填充响应式 svg答案

【问题标题】：Fill responsive svg with background image with preserving ratio用保留比率的背景图像填充响应式 svg
【发布时间】：2017-11-04 12:42:50
【问题描述】：

我尝试在我的 HTML 代码中绘制一个 svg 以获得具有背景图像的特定路径/对象。该对象应该有点响应（使用引导程序），但填充了图像并且图像应该保持其比例。

<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47"  preserveAspectRatio="none"  >
    <defs>
      <pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
        <image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" 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>

您可以在现场演示中看到它： ~~https://liveweave.com/N5nib6~~ https://jsfiddle.net/zyyvd86g/

也许有人可以帮忙吗？我希望问题足够清楚。

【问题讨论】：

欢迎来到 Stack Overflow。您的 liveweave 演示与您的问题不符。你能解决这个问题吗？
我更改了链接。我不知道，为什么它不能按预期工作。在我的电脑上，我看到了正确的版本，但在我的智能手机上却没有。

标签： html svg background

【解决方案1】：

您可以对 svg 元素使用 max-width:100%，并在此 svg 上使用 div 元素换行。你可以得到响应式图片

div {
    width: 80%;
    height: auto;
    margin: 0 auto;
}
svg {
    max-width: 100%;
    height: auto;
}

<div>
	<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47"  preserveAspectRatio="none"  >
    <defs>
      <pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
        <image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" 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>

【讨论】：

【解决方案2】：

IMO 意见，解决您的问题的简单方法是在您的 SVG 上使用不同的 preserveAspectRatio。

使用preserveAspectRatio="none" 会拉伸您的 SVG 并导致问题。

我假设您想在路径底部保持“俯冲”的形状。对吗？

如果是这样，您可能更喜欢使用

preserveAspectRatio="xMidYMax slice"

相反。这会将 SVG 放大以填充 SVG 视口的整个宽度，同时保持纵横比相同，并保持 SVG 视图框的底部在屏幕上。

<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice">
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
	    <image xlink:href="http://lorempixel.com/1153/680/" x="0" y="0" width="1153" 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>

【讨论】：