Text umrahmen in SVG

[Matthias Scharwies]

Hallo A-S! Herzlich willkommen bei SELFHTML!

Hallo. Wie kann ich in einer SVG ein Rechteck um einen ganzen Text erstellen, wenn ich wegen variabler schrift nicht genau weis, wie breit er beim Betrachter wird? Ich bräuchte also eine Breite, welche sich an den Inhalt anpasst.

Das ist genau das Problem und der Unterschied zu HTML.

In HTML bilden alle Elemente Blöcke mit einer Breite und Höhe. So kannst Du Text eine Farbe, aber auch eine Hintergrundfarbe oder einen Rand geben.

In SVG besteht der Text nur aus den Zeichen oder Glyphen, denen du eine Füllung (fill) oder Randlinie (stroke) geben kannst. Der „Hintergrund“ existiert nicht, kann aber durch ein rect, das vorher (es gibt ja (noch) keinen z-index bei SVG) gezeichnet wird, mit Hintergrund und Rahmen um den Text gestaltet werden.

Die Dimensionen müsstest du entweder ausprobieren oder mit Javascript berechnen.

[EDIT] Hier bei SO gefunden: svg-get-text-element-width [/EDIT]

Herzliche Grüße

Matthias Scharwies