背景封面无法正常工作

Question

我有一个问题：svg吧没有响应（见图），任何人都可能有解决方案吗？我现在认真搜索了大约1个半小时，我真的很沮丧：/

这是我的代码：

HTML ：

<div class="overview-footer">
  <img src="assets/layout/images/dashboard/progress_day.svg" 
       style="display:inline-block;vertical-align:top;" />
  <img src="assets/layout/images/dashboard/progress_week.svg" 
       style="display:inline-block;vertical-align:top;" />
  <img src="assets/layout/images/dashboard/progress_month.svg" 
       style="display:inline-block;vertical-align:top;" />
  <div class="year"></div>
</div>

CSS ：

.year {
background-image: url(assets/layout/images/dashboard/progress_year.svg);
width:100%;
height:20px;
display: table;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

}

那是相关的svg数据：

   <rect id="Rectangle-4" fill="#D8D8D8" x="0" y="0" width="100%" height="20"></rect>
   <rect id="Rectangle-4" fill="green" x="0" y="0" width="50%" height="20"></rect>

编辑： https://plnkr.co/edit/ute15PscCtevJECeRLiE?p=preview  你去吧

Answer 1

您面临的问题实际上是双重的：

1. 您在标记中声明SVG元素的显式宽度和高度（例如width="345" height="15"）。这会强制保留纵横比。
2. 您没有在SVG元素中声明preserveAspectRatio="none"，这意味着它们将始终按比例缩放。

只有在<div>个元素的宽度小于345px时才会出现问题，这会导致浏览器按照您不想要的方式缩放图像。

如果删除这两个属性，问题就会消失：https://plnkr.co/edit/g26kjqYdtf8eNQtwI2Nb?p=preview

更好的解决方案：CSS + HTML-only解决方案

另一种解决方案是简单地使用绝对定位的伪元素来完成工作。您将节省大量时间来维护这些仅用于单一目的的SVG，并且它们的标记也显得非常臃肿。

如果你看一下下面的代码片段，对你的标记进行一些小修改并对你的CSS进行大修就意味着你不再需要依赖SVG了：

.overview {
  background-color: #D8D8D8;
  position: relative;
  width: 100%;
  height: 20px;
}

.overviewDay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: orange;
  width: 80%;
}

.overviewWeek::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: blue;
  width: 25%;
}

.overviewMonth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: red;
  width: 55%;
}

.overviewYear::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: green;
  width: 50%;
}

<div class="overview-footer">
  <div class="overview overviewDay"></div>
  <div class="overview overviewWeek"></div>
  <div class="overview overviewMonth"></div>
  <div class="overview overviewYear"></div>
</div>