Question

我尝试在HTML代码中绘制一个svg，以获得具有背景图像的特定路径/对象。该对象应该有点响应（使用bootstrap），但填充图像和图像应该预先确定其比例。

fold

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

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

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

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

使用具有保留比率的背景图像填充响应svg

2 个答案: