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属性。

请查看下面的代码段。

＆＃13;

svg{
  max-width: 100%;
}

＆＃13;

<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>

＆＃13;

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既是导航栏菜单上的徽标，也是整页标题背景。希望你能找到我的答案。

如何创建响应式SVG图像

2 个答案: