Ungerade Ränder auf SVG-Element

Question

Ich habe ein einfaches SVG-Element mit Höhe und Breite gleich 80%. Ich verwende auch einen Rand von 10% auf das Element, um das SVG auf der Seite zu zentrieren. Aus irgendeinem seltsamen Grund scheint der Rand jedoch ein y-overflow zu erstellen, so dass die Seite scrollbar ist. Das macht nicht viel Sinn, da ich Stile anwende, die nicht mehr als 100% vertikal und horizontal ergeben sollten. Hier ist mein Code:

html, body {height: 100%;} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
svg { 
 
    margin: 10%; 
 
    height: 80%; 
 
    width: 80%; 
 
    background: #ddd; 
 
} 
 

 
svg path { 
 
    fill: none; 
 
    stroke: #000; 
 
    stroke-linejoin: round; 
 
    transition: 0.2s; 
 
}

<svg viewBox="0 0 40 40"> 
 
    <path d="M15,5 l10,0 l0,10 l10,0 l0,10 l-10,0 l0,10 l-10,0 l0,-10 l-10,0 l0,-10 l10,0 l0,-10 Z" /> 
 
</svg>

Im Grunde möchte ich die SVG mit Prozent Rand zentriert werden, und ich will nicht, der Körper scrollbaren sein.

Vielen Dank im Voraus!

Answer 1

Fügen Sie overflow-y:hidden zu Körper hinzu, um zu verhindern, dass es scrollt. Hier ist der Codeausschnitt unten.

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    overflow-y: hidden; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
svg { 
 
    margin: 10%; 
 
    height: 80%; 
 
    width: 80%; 
 
    background: #ddd; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    position:absolute; 
 
} 
 

 
svg path { 
 
    fill: none; 
 
    stroke: #000; 
 
    stroke-linejoin: round; 
 
    transition: 0.2s; 
 
}

<svg viewBox="0 0 40 40"> 
 
    <path d="M15,5 l10,0 l0,10 l10,0 l0,10 l-10,0 l0,10 l-10,0 l0,-10 l-10,0 l0,-10 l10,0 l0,-10 Z" /> 
 
</svg>

Answer 2

die definition of margin prüfen. Prozentuale Ränder werden relativ zu der Breite des umgebenden Blocks berechnet.

Sie legen also die oberen und unteren Ränder zu groß fest. Daher das Scrollen.

Lösung

Vertically ein Element von unbekannter Größe Zentrierung ist ziemlich schwierig. CSS macht es nicht einfach. Aber es gibt einen kleinen Trick, den Sie verwenden können as explained here.

Die Idee ist, ein zweites Element zu verwenden, das 100% Höhe hat, dann beide Elemente vertikal zu zentrieren, so dass der kleinere (in unserem Fall das SVG) zentriert wird.

html, body {height: 100%;} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
svg { 
 
    height: 80%; 
 
    width: 80%; 
 
    background: #ddd; 
 
    vertical-align: middle; 
 
} 
 

 
svg path { 
 
    fill: none; 
 
    stroke: #000; 
 
    stroke-linejoin: round; 
 
    transition: 0.2s; 
 
} 
 

 
.wrapper:before { 
 
    content: '\200B'; /* zero width space */ 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 

 
.wrapper { 
 
    text-align: center; 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 

 
    <svg viewBox="0 0 40 40"> 
 
    <path d="M15,5 l10,0 l0,10 l10,0 l0,10 l-10,0 l0,10 l-10,0 l0,-10 l-10,0 l0,-10 l10,0 l0,-10 Z" /> 
 
    </svg> 
 

 
</div>