背景蓋無法正常工作

Question

我有一個問題：svg欄沒有響應（參見圖片），有人可能對此有解決方案嗎？ 我現在認真搜索了大約1 1/2小時，而我真的很沮喪：/

這是我的代碼：

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 =預覽

Answer 1

您面臨的問題實際上有兩個方面：

1. 您正在標記中聲明SVG元素的顯式寬度和高度（例如， width="345" height="15" ）。 這迫使保持寬高比。
2. 您沒有在SVG元素中聲明preserveAspectRatio="none" ，這意味着它們將始終按比例縮放。

僅當<div>元素的寬度小於345px時才會出現問題，這將導致瀏覽器以您不希望的方式縮放圖像。

如果刪除這兩個屬性，您的問題將消失： https : //plnkr.co/edit/g26kjqYdtf8eNQtwI2Nb?p=preview

更好的解決方案：僅CSS + HTML的解決方案

另一種解決方案是簡單地使用絕對定位的偽元素來完成這項工作。 維護這些僅用於單一目的的SVG將節省大量時間，並且它們的標記也顯得absolutely腫。

如果您看下面的代碼片段，對標記進行小的修改和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>