は、私は下の写真のようなデザインをコーディングする必要があり、背景

Question

修整SVG：

、それが応答バージョンだが、そのようになっています

イムもこの形状として背景をコーディングする方法はわかりません背景の前に整形された線で。

私はちょうどbgと行のための2つの非常に大きなsvgを作成するか、それ以外の方法ですか？

私は、私は、これは互いの上に3 SVGsを積層してあるアプローチでしょうどのように任意のヘルプ

Answer 1

に感謝することでしょう。 position: relativeコンテナ要素内のposition: absolute SVGを使用します。

三層である：灰色塗りつぶし

3つのボックス

青色ストロークを有する前景グラフ形状のミッドグラウンドSVGと背景グラフ形状

1. 、ありません塗りつぶすので、レイヤー1と2の後ろにレイヤーが表示されます。

preserveAspectRatio="none"グラフの幅を画面の幅に合わせることができます。同じパス定義を共有してスペースを節約することもできます。

私たちは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>