SVG 不尊重背景大小 100% 100%

Question

我有 this SVG image 我想覆盖一个完整的容器，保持其独特的边缘。 background-size: 100% 100%; 似乎是完美的选择，虽然它适用于常规图像，但在这种情况下不起作用。为什么？

（jpeg 取自 James 的回答）

html, body {
  background-color: #ddd;
}
.container {
  margin: 20px; padding: 20px; border: 1px solid #000;

  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.container.svg {
  background-image: url(https://svgshare.com/i/RWM.svg);
}
.container.img {
  background-image: url(https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?auto=compress&cs=tinysrgb&h=350);
}

<div class="container svg">
  some<br>content<br>makes<br>this<br>large
</div>
<div class="container img">
  some<br>content<br>makes<br>this<br>large
</div>

Answer 1

background-size: 100% 100%; 应该可以满足您的要求。请检查您的代码是否有错误。

这里是 fiddle：https://jsfiddle.net/7pn3cvh3/

Answer 2

好吧，我是在阅读了其他几个主题之后才弄明白的 - 包括那些有用的主题。

罪魁祸首是 viewBox 在 <svg> 的定义中。当我删除它时，图像会按应有的比例缩放。对于 safari，我需要添加 preserveAspectRatio="none".

之前：

<svg width="392px" height="499px" viewBox="0 0 392 499" ...

之后：

<svg width="392px" height="499px" preserveAspectRatio="none" ...

html, body {
  background-color: #ddd;
}
.container {
  margin: 20px; padding: 20px; border: 1px solid #000;

  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.container.svg {
  background-image: url(https://svgshare.com/i/RWM.svg);
}
.container.img {
  background-image: url(https://svgshare.com/i/RWv.svg);
}

<div class="container svg">
  some<br>content<br>makes<br>this<br>large
</div>
<div class="container img">
  some<br>content<br>makes<br>this<br>large
</div>

SVG 不尊重背景大小 100% 100%

SVG doesn't respect background-size 100% 100%

css

svg

image

background-image