html - 形状的 svg 背景

Question

我必须像下图一样编写代码设计:

它的响应式版本看起来像这样:

我不知道如何用这个形状和背景之前的形状线来编码背景。

我应该为 bg 和 line 创建两个非常大的 svg 还是其他方式？

如有任何帮助，我将不胜感激

Answer 1

我的处理方法是将三个 SVG 堆叠在一起。在 position: relative 容器元素中使用 position: absolute SVG。

三层是:

1. 带有灰色填充的背景图形形状
2. 带有三个框的中景 SVG
3. 具有蓝色描边但没有填充的前景图形形状，因此您可以看到它后面的第 1 层和第 2 层。

我们可以让这两个图形形状 preserveAspectRatio="none" 使它们拉伸(stretch)到屏幕的宽度，我们也可以让它们共享相同的路径定义以节省空间。

我们制作了中间层 preserveAspectRatio="xMaxYMid meet" 因此它位于屏幕的右侧。这只是我们可以使用的几种方式中的一种方式来实现这种效果。

body {
  margin: 0;
  padding: 0;
  background-color: #111166;
}

#svg-container {
  position: relative;
}

#svg-container > svg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 400px;
}

#background-graph {
  fill: #f8f8f8;
  overflow: visible;
}

#foreground-graph {
  fill: none;
  stroke: #111166;
  stroke-width: 2;
}

<svg width="0" height="0" display="none">
  <!-- The graph shape. Used in two places below. -->
  <polygon id="jagged" points="0,360, 65,325, 100,340, 120,330, 130,335, 225,270, 255,295, 280,275, 290,290, 340,250, 360, 255, 400,235, 400,2000, 0,2000" style="vector-effect: non-scaling-stroke"/>
</svg>

<div id="svg-container">
  <svg id="background-graph" viewBox="0 0 400 400" preserveAspectRatio="none">
    <use xlink:href="#jagged"/>
  </svg>

  <svg id="boxes" viewBox="0 0 400 400" preserveAspectRatio="xMaxYMid meet">
    <rect id="box1" x="30" y="10" width="225" height="175" fill="#fafafa"/>
    <rect id="box2" x="75" y="155" width="265" height="190" fill="#fff"/>
    <rect id="box3" x="260" y="80" width="125" height="70" fill="#fafafa"/>
  </svg>

  <svg id="foreground-graph" viewBox="0 0 400 400" preserveAspectRatio="none">
    <use xlink:href="#jagged"/>
  </svg>
</div>