Genişletilebilir bir kap oluşturmak için birden çok SVG parçasını hizalayın

Question

Boyutuna bağlı olarak genişletilecek içerik barındıracak bir kutu oluşturmaya çalışıyorum. Kutu 3 SVG'den (Top, Repeat-y, Bottom Merkezi) yapılmıştır. Ama onları düzgün bir şekilde hizalayamıyorum. Illustrator'da düzinelerce kez kontrol ettim, bunlar hatlar arasında aynı boyut ve mesafeye sahipler. Oranı tutmalı ve kolayca hizalanmalıdır. peşin

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

Teşekkür:

ben düzeltmek için yönetemez bir test vakası oluşturduk.

Selamlar,

Answer 1

SVG dosyaları ViewBox ama preserveaspectratio kümesi yok öznitelikleri var. Eğer atlanırsaAspectRatio varsayılanı xMidYMid değerine ayarlanır. Şekilleri, onlara ayırdığınız boşluklara uyacak şekilde deforme etmeyi bekliyorsunuz, ancak bunu yapmayacaklar.

Bunu düzeltmek için, SVG dosyalarına (en azından alt kısımda) preserveAspectRatio = "none" değerini ekleyin.