Zentriert Text und SVG-Elemente vertikal ohne Padding und Textausrichtung

Ich versuche eine Reihe von Labels und SVG-Elementen zu formatieren; Allerdings kann ich die Ausrichtung nicht korrekt finden. Ich habe verschiedene CSS-Alignment-Strategien gesucht und bin mit leeren Händen soweit gekommen. Der folgende Code erzeugt eine Beschriftung und eine Box mit Text in der Mitte. Ich möchte, dass der Beschriftungstext und der Text in der Box vertikal in derselben Zeile zentriert sind. Zur Zeit sind sie etwas versetzt. Ich bemerke auch, dass der Rand um die zwei Elemente nicht konsistent ist (der Abstand zwischen der Grenze und der Spitze ist kleiner als zwischen der Grenze und der Unterseite), was einen Teil der Fehlausrichtung verursachen kann. Im Idealfall möchte ich alle Ränder/Abstände um die Elemente beseitigen und sie richtig zentrieren.Zentriert Text und SVG-Elemente vertikal ohne Padding und Textausrichtung

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <style> 
     h1{ 
      margin-right: 10px; 
      font-size:1.5em; 
     } 
     #parent{ 
      border:1px solid black; 
      display: flex; 
      justify-content: left; 
      align-items: center; 
     } 
     div{ 
      margin: 0; 
      padding: 0; 
     } 
     svg{ 
      margin: 0; 
      padding: 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="parent"> 
     <h1> 
      Label 
     </h1> 
     <div> 
      <svg width="50" height="50"> 
       <g> 
        <rect height="50" width="50" x="0" y="0" fill="#A2E074" rx="5" ry="5"/> 
        <text text-anchor="middle" style="alignment-baseline: central; fill: #666;" x="25" y="25"> 
         SVG 
        </text> 
       </g> 
      </svg> 
     </div> 
    </div> 
</body> 
</html>

Quelle

2016-05-26 CurtisF

Sie können Text in svg mit diesen Zielen gehören:

1.Set die Position des Textes auf das absolute Zentrum des Elements, in dem Sie es zum Zentrum: Wenn es die Eltern, Sie könnte einfach x = "50%" y = "50%" tun. Wenn es ein anderes Element ist, wäre x das x dieses Elements + die halbe Breite (und ähnlich für y, aber mit der Höhe).

2.Use Text-Anker-Eigenschaft den Text horizontal mit dem Wert Mitte zu zentrieren:

middle 

    The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position.

3.Use der Ausrichtungs basisliniengemßen Eigenschaft den Text vertikal mit dem Wert Mitte zu zentrieren (oder in Abhängigkeit von wie Sie es aussehen wollen, können Sie zentral)

Beispiel tun:

<div id="parent"> 
     <h1> 
      Label 
     </h1> 
     <div> 
      <svg width="300" height="300"> 
       <g> 
        <rect height="300" width="300" fill="#A2E074" rx="5" ry="5"/> 
        <text text-anchor="middle" style="alignment-baseline: middle; fill: #666;" x="50%" y="50%"> 
         SVG 
        </text> 
       </g> 
      </svg> 
     </div> 
    </div>

Quelle

2016-05-26 18:44:12 satya

ich nicht gewesen, ganz klar in meiner Frage. Entschuldigen Sie. Ihre Lösung zentriert den Text in der SVG. Das Label und der SVG-Text sind jedoch nicht horizontal ausgerichtet. Dies wird offensichtlich, wenn Sie die Breite und Höhe des SVG-Elements und Rect auf etwas niedriger (z. B. 50) verkleinern. Ich möchte, dass beide vertikal zentriert sind, aber auf derselben horizontalen Linie. – CurtisF

Zentriert Text und SVG-Elemente vertikal ohne Padding und Textausrichtung

Antwort

Verwandte Themen