如何创建响应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是导航栏菜单上的徽标和完整页面标题背景。希望你会发现我的答案有用。