Mehrere SVG-Elemente ausrichten, um einen erweiterbaren Container zu erstellen

Ich versuche, eine Box zu erstellen, die Inhalt enthält, der je nach Größe erweitert wird. Die Box besteht aus 3 SVG (Top, Center, die wiederholt-y, unten). Aber ich kann sie nicht richtig ausrichten. Ich habe Dutzende von Malen in Illustrator überprüft, diese haben die gleiche Größe und Abstand zwischen den Zeilen. Es sollte das Verhältnis beibehalten und leicht ausrichten.Mehrere SVG-Elemente ausrichten, um einen erweiterbaren Container zu erstellen

Ich habe einen Testfall erstellt, die ich nicht verwalten kann zu beheben:

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

Vielen Dank im Voraus.

Grüße,

Quelle

2016-04-02 MyWetSocks

Fragen, die Code-Hilfe suchen, müssen den kürzesten Code enthalten, der für die Reproduktion erforderlich ist ** in der Frage selbst ** vorzugsweise in einem [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/ Einführung-Runnable-Javascript-CSS-und-HTML-Code-Snippets /). Siehe [** So erstellen Sie ein minimales, vollständiges und verifizierbares Beispiel **] (http://stackoverflow.com/help/mcve) –

Entschuldigung, ich war mir nicht bewusst. Auf geht's :) – MyWetSocks

Die SVG-Dateien haben viewBox Attribute haben aber nicht preserveAspectRatio Satz. Wenn nicht angegeben, wird standardmäßig xMidYMid für preserveAspectRatio verwendet. Sie erwarten, dass sich die Formen so verformen, dass sie in die ihnen zugewiesenen Bereiche passen, dies jedoch nicht.

Fügen Sie preserveAspectRatio = "none" zu den SVG-Dateien hinzu (zumindest die untere sowieso), um dies zu beheben.

Quelle

2016-04-02 22:17:24

Mehrere SVG-Elemente ausrichten, um einen erweiterbaren Container zu erstellen

Antwort

Verwandte Themen