SVG ViewBox bricht die Höhe

Warum verursacht das Setzen des Viewbox-Attributs auf dem SVG-Element die Höhe und verursacht einen Überlauf? Wie kann ich das verhindern?SVG ViewBox bricht die Höhe

.parent { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: green; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.child { 
 
    flex-grow: 1; 
 
    background-color: yellow; 
 
    margin: 10px; 
 
}

<div class="parent"> 
 
    <h1>testa</h1> 
 
    <div class="child"> 
 
    <svg viewbox="0 0 40 40"> 
 
     <rect x="10" y="10" width="30" height="30" fill="red" /> 
 
    </svg> 
 
    </div> 
 
</div>

Quelle

2017-05-25 Henning

Wenn Sie verhindern möchten, dass der Überlauf angezeigt wird, können Sie dem **. Parent ** div. 'Overflow-y: hidden' hinzufügen. – Arthur

Ich würde es vorziehen, wenn die SVG nicht so viel Platz braucht und eher ihren Inhalt skaliert. – Henning

Dies würde auch mit einem Bild passieren, es ist nicht exklusiv für SVG und die Verwendung des 'viewBox' Attributs. – hungerstar

Da Sie Höhe sind zu definieren (über flex-grow: 1;), können Sie die absolute Positionierung verwenden, um Sie die Höhe .child zu helfen zu füllen.

.parent { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: green; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.child { 
 
    position: relative; 
 
    flex-grow: 1; 
 
    background-color: yellow; 
 
    margin: 10px; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    height: 100%; 
 
    background-color: rgba(0, 0, 0, 0.25); // <= for illustrative purposes 
 
}

<div class="parent"> 
 
    <h1>testa</h1> 
 
    <div class="child"> 
 
    <svg viewBox="0 0 40 40"> 
 
     <rect x="10" y="10" width="30" height="30" fill="red" /> 
 
    </svg> 
 
    </div> 
 
</div>

Ich glaube, da draußen eine object-fit Lösung gibt es aber die Browser-Unterstützung möglicherweise nicht, was Sie es brauchen.

Quelle

2017-05-25 14:08:58 hungerstar

SVG ViewBox bricht die Höhe

Antwort

Verwandte Themen