Responsive Design: Zentrieren von Text in einem SVG

Question

Ich möchte einen Buchstaben vertikal und horizontal in einem SVG-Kreis zentrieren, so dass er zentriert bleibt und im gleichen Verhältnis zum Kreis bleibt. Während ich den Code unten habe, habe ich auch this JSFiddle wo, wenn Sie die Größe der Vorschau ändern, dann können Sie sehen, dass der Buchstabe nicht proportional zum Kreis bleibt.

li { 
 
    list-style-type: none; 
 
    position: relative; 
 
} 
 

 
li div { 
 
    font-size: 60vw; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 7vw; 
 
    left: -3vw; 
 
    width: 100%; 
 
}

<ul> 
 
    <li class="circleIcon" id="{{ item.id }}"> 
 
    <svg viewBox="0 0 100 100"> 
 
     <circle cx="46" cy="46" r="45" stroke="black" stroke-width="1" fill="grey" /> 
 
    </svg> 
 
    <div>I</div> 
 
    </li> 
 
</ul>

Was kann ich mit dem Kreis um den Text im Verhältnis zu halten, ohne Javascript zu verwenden? Vielen Dank.

Answer 1

Wenn Sie nicht müssen eine Svg verwenden, können Sie dies tun, indem Sie das Element kreisförmig, und geben Sie ihm eine Grenze und eine Hintergrundfarbe.

Bearbeiten: Bemerkte Ihren Kommentar über die Grenze zu animieren. CSS-Animationen sind nicht auf svg s beschränkt. - Ich habe meiner Lösung eine Rahmenanimation hinzugefügt (lernen Sie the basics of CSS animations at W3Schools, und erhalten Sie more in-depth on MDN).

Beachten Sie, dass dieses Ergebnis nicht mehr als ein Element erfordert. Führen Sie dieses Snippet aus und scrollen Sie nach unten, um zu sehen, wie es nur mit <div>i</div> funktioniert!

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li, div { 
 
    width: 80vw; 
 
    height: 80vw; 
 
    margin: 0 auto; 
 

 
    text-align: center; 
 

 
    /* the circle */ 
 
    background: gray; 
 
    border: 1vw solid black; /* I would usually just use a px weight, but I'm trying to make it look like your example */ 
 
    border-radius: 50%; /* makes it circular */ 
 
    
 
    /* the letter */ 
 
    font-size: 60vw; 
 
    line-height: 80vw; /* making the line-height the same as the parent element's height centers the letter vertically */ 
 
    
 
    /* animate the borders */ 
 
    -webkit-animation: pulse 5s infinite ease-in 0s; 
 
    animation: pulse 5s infinite ease-in 0s; 
 
} 
 

 
/* the animation */ 
 
@-webkit-keyframes pulse { 
 
    0% { border-color: black } 
 
    50% { border-color: red } 
 
} 
 
@keyframes pulse { 
 
    0% { border-color: black } 
 
    50% { border-color: red } 
 
}

<ul> 
 
    <li>I</li> 
 
</ul> 
 

 
<div>i</div>

Answer 2

Sie können dies tun, ohne dass ein SVG und profitieren Sie von Flexbox nehmen:

Jetzt Ihre HTML sieht sauberer:

<ul> 
    <li class="circleIcon" id="{{ item.id }}"> 
     <div>I</div> 
    </li> 
</ul> 

Hier die CSS mit etwas Erklärung dessen, was ich getan habe:

li{ 
    position:relative; 
    list-style:none; 
} 

li div { 
    position: relative; 
    /* We center vertically and horizontally using flexbox */ 
    display: flex; 
    align-items:center; 
    justify-content:center; 
    /* until here */ 
    width: 100%; 
    height:0; 
    padding: 50% 0; 
    border-radius: 50%; 
    font-size:60vw; 
    /* just styling the circle */ 
    border: 5px solid black; 
    background:grey; 
} 

Ich habe eine Geige für Sie: https://jsfiddle.net/3frft2gd/2/

HINWEIS: wenn Sie den Text möchten Sie Medienanfragen verwenden und es wird funktionieren, hoffen, dass es hilft, kann zu halten Skalierung.

Answer 3

Wenn Sie keine Probleme mit der Verwendung von text Eigenschaft von SVG haben, dann kann dies Ihnen helfen.

li { 
 
    list-style-type: none; 
 
    position: relative; 
 
} 
 
li text { 
 
    font-size: 4em; 
 
    line-height: 1; 
 
}

<ul> 
 
    <li class="circleIcon" id="{{ item.id }}"> 
 
    <svg viewBox="0 0 100 100"> 
 
     <circle cx="46" cy="46" r="45" stroke="black" stroke-width="1" fill="grey" /> 
 
     <text x="45" y="45" font-family="Verdana" font-size="60" fill="black" alignment-baseline="central" text-anchor="middle">I</text> 
 
    </svg> 
 
    </li> 
 
</ul>

Answer 4

Sie können horizontal Zentrum Text in SVG, aber es gibt keinen perfekten Weg, um es in der vertikalen Richtung zu tun.

Einige Leute werden vorschlagen, <foreignObject> zu verwenden, um ein kleines Stück HTML in das SVG einzubetten. Dann nutzen Sie die HTML-Fähigkeit, die Zentrierung durchzuführen. Aber IMO das ist Overkill für einfache SVGs wie deins.

Ein anderer Vorschlag ist, dominant-baseline CSS-Eigenschaft as seen here zu verwenden. Dies hängt jedoch von der Browserunterstützung für diese Schriftartentabellen und die Schriftart mit diesen Tabellen ab.

Meine bevorzugte Lösung ist es, zu use a dy with a value in em units. Alles, was Sie tun müssen, ist den richtigen em-Wert für die verwendete Schriftart zu finden. Und es wird bei jeder Schriftgröße funktionieren.

Zum Beispiel der richtige Wert für Verdana ist um 0.36em. Demo unten.

li { 
 
    list-style-type: none; 
 
    position: relative; 
 
} 
 

 
li div { 
 
    font-size: 60vw; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 7vw; 
 
    left: -3vw; 
 
    width: 100%; 
 
}

<ul> 
 
    <li class="circleIcon" id="{{ item.id }}"> 
 
    <svg viewBox="0 0 100 100"> 
 
     <circle cx="46" cy="46" r="45" stroke="black" stroke-width="1" fill="grey" /> 
 
     <text x="46" y="46" font-family="Verdana" font-size="80" dy="0.36em" text-anchor="middle">I</text> 
 
    </svg> 
 
    </li> 
 
</ul>