SVGの複数の部分を調整して拡張可能なコンテナを作成する

Question

サイズに応じて拡大するコンテンツを含むボックスを作成しようとしています。ボックスは3 SVG（Top、Centre of repeats-y、Bottom）で構成されています。しかし、私はそれらを適切に整列させることはできません。 Illustratorで数十回もチェックしていますが、これらの線と線の間隔は同じです。それは比率を維持し、簡単に整列する必要があります。事前に

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    width: 400px; 
 
} 
 
img { 
 
    display: block; 
 
} 
 
.top, 
 
.bottom { 
 
    width: 100%; 
 
} 
 
.corpus { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: url('http://f.cl.ly/items/1G3o0j0e1S32301k3y18/corpus.svg'); 
 
    background-repeat: repeat-y; 
 
}

<div class="container"> 
 
    <div class="top"> 
 
    <img src="http://f.cl.ly/items/3m3u3D2p1o0W2e2n1T1B/top.svg"> 
 
    </div> 
 
    <div class="corpus"></div> 
 
    <div class="bot"> 
 
    <img src="http://f.cl.ly/items/0z0M3u3h1f401u1T351d/bot.svg"> 
 
    </div> 
 
</div>

ありがとう：

私は修正するために管理することはできませんテストケースを作成しました。

よろしく、

Answer 1

SVGファイルは、ビューボックス属性を持っているが、preserveAspectRatioが設定されていません。省略した場合、preserveAspectRatioのデフォルトはxMidYMidになります。あなたはあなたが割り当てたスペースに合わせて形が変形することを期待していますが、それはしません。

この問題を解決するには、SVGファイル（少なくとも下部ファイル）にpreserveAspectRatio = "none"を追加します。