如何創建響應SVG圖像

Question

我想使用SVG在整個頁面上製作波浪線，並且它應該是響應式的，無論屏幕寬度如何，都可以跨頁面伸展。

我在這個StackOverflow文章中看到了我想要的那種東西，但是SVG只產生一個固定寬度的圖像。

<svg height="125" width="1349"> 
    <path d="M -35 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke- width="5" fill="none" /> 
    <path d="M 40 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
    <path d="M 190 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
    <path d="M 265 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
    <path d="M 415 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
    <path d="M 490 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
    <path d="M 640 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
    <path d="M 715 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
    <path d="M 865 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
    <path d="M 940 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
    <path d="M 1090 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
    <path d="M 1165 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
    <path d="M 1315 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
    Sorry, your browser does not support inline SVG. 
</svg> 

一個可能的解決方案是使用javascript在整個頁面寬度上重複使用SVG。或者我想我可以將許多圖像鏈接在一起，並使用媒體查詢隱藏/顯示足以填充頁面寬度，但這似乎是一個笨拙的解決方案。

有誰知道純SVG/HTML5解決方案？

Answer 1

您應該從標記中刪除特定width和height的所有屬性，但還應該將viewBox屬性添加到根svg標記。

請檢查下面的代碼段。

svg{ 
 
    max-width: 100%; 
 
}

<svg viewBox="0 0 1349 125"> 
 
    <path d="M -35 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
 
    <path d="M 40 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
 
    <path d="M 190 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
 
    <path d="M 265 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
 
    <path d="M 415 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
 
    <path d="M 490 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
 
    <path d="M 640 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
 
    <path d="M 715 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
 
    <path d="M 865 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
 
    <path d="M 940 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
 
    <path d="M 1090 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
 
    <path d="M 1165 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" /> 
 
    <path d="M 1315 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" /> 
 
    Sorry, your browser does not support inline SVG. 
 
</svg>

Answer 2

提供@Juan Ferreras應該做的伎倆答案。 但是，如果你試圖把SVG的背景，你可以嘗試這樣的事：

HTML：

<div class="theSVG"></div> 

CSS：

.theSVG { 
width: 100%; 
height: 100%; 
background-image:url('img/my_svg_file.svg'); 

background-position: center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; 

/* You could even add a Parralax Effect, with a larger image though */  
background-repeat: no-repeat; 
background-attachment: fixed; 

}

你在本網站上可以找到一個我爲學校工作人員建造的例子：https://victorgutt.com/docs/travaux/promo/index.html

SVG是導航欄菜單上的徽標和完整頁面標題背景。希望你會發現我的答案有用。