Text im SVG ausrichten
Dynamischen Text innerhalb von SVGs horizontal und vertikal ausrichten.
20.03.2024 - Manuel Wohlers
Horizontale Ausrichtung
- Die Text-Platzierung einstellen mit dem Property text-anchor: text-anchor="middle" für zentrierte Ausrichtung
- Die Anker-Position für Zentrierung kann im Eltern-Element mit x="50%" eingestellt werden.
- Wenn der Text nicht am Elternelement sondern an einem beliebigen anderen Element ausgerichtet werden soll, muss gerechnet werden, z.B. x_text = x + 1/2*Breite
Vertikale Ausrichtung
Relevante Attribute:
- dominant-baseline = Grundlinie des Textes einstellen
- y = absoluter Y-Wert
- dy = Y-Wert relativ zum vorangegangenen Element
Quelle: https://stackoverflow.com/a/31522006