SVG text und tspan: Schrift, Farbe, an Pfad ausrichten und rotieren

SVG text als Klartext: durchsuchbar, indexierbar

Text in SVG ist Text. Das text-Element zeigt Texte in der Grafik und ist Klartext – kann also auch von Suchmaschinen indexiert und von Readern vorgelesen werden.

SVG text wird durch Attribute und CSS ähnlich dargestellt werden wie Text in HTML: Schrift, Schriftgröße und -farbe, Text rotieren und an Text an Pfad ausrichten.

Text positionieren

SVG rendert Text genauso wie Formen: Das SVG text-Tag enthält die Informationen zur Position des Texts, Transformationen sowie Eigenschaften, die als CSS style oder SVG-Attribut festgelegt werden.

<text x="20" y="20" 
      font-family="sans-serif" 
      font-size="20px" 
      fill="blue">Hallo    SVG!</text>

Die Bestimmung der Position richtet sich nach dem ersten Buchstaben unten links (bei Schriftrichtung links nach rechts) und wird mit x und y Koordinaten beschrieben (Schrift von oben nach unten: style="writing-mode: tb;").

Hallo SVG

Ohne font-size und font-family- und fill-Attribut rendern die Browser Schriftart, Schriftgröße und -farbe entsprechend ihren Voreinstellungen – genauso wie bei HTML. Inline-SVG erbt die Schrift von seinem umfassenden Element, in externen SVG-Bildern ohne Deklaration der Schrift nutzen die Browser meist eine Serifenschrift.

Genauso wie in HTML unterdrückt SVG aufeinander folgende Leerzeichen und Zeilenumbrüche im Text.

Zeilenumbruch

Um es gleich vorweg zu sagen: In SVG gibt keinen automatischen Zeilenumbruch wie in HTML-p-Elementen oder Illustrationsprogrammen. Es gab ein einen komplizierten Ansatz mit flowRoot, flowRegion und flowPara, der in Inkscape immer noch zur Verfügung steht, aber dieser Teil der SVG-Spezifikation ist aus dem Draft-Status nie herausgekommen.

Die Browser unterstützen flowRoot nicht und rendern den Text nicht. Das nicht gerade komfortable tspan-Element ist weiterhin die Lösung für mehrzeilige Texte.

Hallo SVG Alles absolut
<text font-size="20px">
	<tspan x="50" y="50">Hallo SVG</tspan>
	<tspan x="50" y="75">Alles absolut</tspan>
</text>

SVG text und CSS style

Wie bei den meisten SVG-Tags kann ein großer Teil der Attribute für das Rendering in ein style-Attribut gesetzt und als CSS gerendert werden. CSS class ist ebenfalls ein gültiges Attribut von SVG-Elementen und damit auch von text.

CSS style für SVG Text

  • font-family,
  • font-size,
  • fill (anstelle von color in HTML),
  • font-weight,
  • font-style,
  • @font-face
  • text-decoration,
  • text-transform,
  • letter-spacing,
  • word-spacing,
  • font-variant

Was geht nicht?

  • line-height
  • fill: linearGradient
  • white-space

Ein relativer Abstand von tspan-Elementen ersetzt line-height, für Verläufe hat SVG mit linearGradient eine eigene Technik.

Hallo SVG
<!-- 
    comment
-->
<text  x="50" y="50">Hallo    SVG</text>

text tspan

tspan positioniert Text in Text-Elementen durch ein eigenes Koordinatensystem. SVG tspan sorgt für einen Zeilenbruch in mehrzeiligen Texten und bringt CSS wie fill, font-size oder font-weight zu Textfragmenten.

Text umbrechen in CSS einfach mit tspan Zeilenumbruch für Zeilenumbruch

CSS line-height wirkt nicht in SVG Text. Die einfachste Variante für einen Zeilenumbruch mit tspan ist ein relativer Zeilenabstand dy anstelle einer absoluten y-Position.

<text x="25" y="50">
   Text umbrechen in CSS
      <tspan x="25" dy="2em" fill="red">einfach</tspan> mit tspan
      <tspan x="25" dy="2em">Zeilenumbruch</tspan>
     <tspan x="25" dy="2em">für Zeilenumbruch</tspan>
</text>

Bei einem relativen Abstand muss nur das umfassende text-Element verschoben werden, dann wandern die darunter liegenden tspan-Element automatisch im richtigen Abstand mit. Genauso funktioniert der automatische Abstand zwischen Textzeilen beim Vergrößern bzw. Verkleinern des Text-Elements.

SVG-Text rechtsbünding, mittig ausrichten: text-anchor

text-anchor regelt die Ausrichtung des Texts und richtet Text zentriert, rechtsbündig und linksbündig (Default) aus.

SVG Text und tspan ausrichten: rechtsbündig, mittig, zentriert
<text text-anchor="end">
  <tspan y="15" x="278">733 KB</tspan>
  <tspan y="35" x="278">18 MB</tspan>
  <tspan y="55" x="278">254,8 GB</tspan>
</text>
<text text-anchor="middle">
  <tspan y="15" x="362">Marinde</tspan>
  <tspan y="35" x="362">Marie Noel Martinus</tspan>
  <tspan y="55" x="362">Emma Watson</tspan>
</text>

Text an Pfad ausrichten

Für Text entlang eines Pfads wird nur der Pfad gebraucht. Das text-Element braucht keine x/y-Koordinaten, sondern richtet sich an den Koordinaten des Pfades aus. Allerdings kann der Text seine Lage durch ein transform ändern.

Wenn die Grafik als externe SVG-Datei mit dem img-Tag geladen wird, muss das SVG-Tag den xlink-Namespace aufführen.

xmlns:xlink="http://www.w3.org/1999/xlink"
SVG Text an einen Pfad anpassen

Der Textpfad muss ein SVG path sein. circle, rect oder polyline würden nicht funktionieren.

Wenn der Pfad nicht geschlossen ist, würde ein überlanger Text am Ende des Pfads abbrechen.

<svg height="100%" width="100%" viewBox="0 0 600 400">
   <defs>
      <path id="textpath" d="m448 200a150 150 0 0 1 -150 150 150 150 0 0 1 -150 -150 150 150 0 0 1 150 -150 150 150 0 0 1 150 150z"/>
   </defs>
   <text transform="rotate(-45 300 200)">
      <textPath xlink:href="#textpath" >
         Text auf dem
      </textPath>
   </text>
   <text transform="rotate(-185 300 200)">
      <textPath xlink:href="#textpath" >
         rechten Pfad
      </textPath>
   </text>
   <circle cx="300" cy="200" r="2"/>
</svg>

Sitzt das path-Element in einem defs-Tag, wird der Pfad nicht angezeigt. Alternativ kann CSS style="stroke:none; fill:none; stroke-width:0" den Pfad verbergen.

svg textpath Text an Pfad ausrichten
<path id="p12" d="M 95,379 A … 95,379 Z" stroke="none" fill="none" stroke-width="0" />
<text x="170" y="500" font-size="60">
    <textPath xlink:href="#p12">Farbton</textPath>
</text>

SVG mit CSS style

SVG Text rotieren

transform = rotate() rotiert einen Text genauso wie ein Rechteck oder einen Kreis. Wenn rotate nur einfach einen Grad für die Rotation angibt, wird der Text um den Nullpunkt der ViewBox rotiert und landet dann irgendwann außerhalb der ViewBox.

<text x="50" y="25">Text rotieren</text>
<text x="50" y="25" transform="rotate(75)">Text rotieren</text>
<circle cx="50" cy="25" r="2" fill="red" />

transform = rotate(Winkel, Nullpunkt X, Nullpunkt Y) versetzt den Drehpunkt des Elements auf einen eigenen Nullpunkt oder Pivotpunkt.

<text x="150" y="50">Text rotieren</text>
<text x="150" y="50" transform="rotate(90,200,50)">Text rotieren 2</text>
<circle cx="200" cy="50" r="2" fill="red" />

Text hochstellen, tiefstellen

Ein so praktisches Tag wie sup und sub aus HTML gibt es in SVG nicht. Anstelle dessen wird das tspan-Tag für das Hochstellen bzw. Tiefstellen benutzt.

Am einfachsten und sichersten ist ein relativer Abstand zum vorangegangenen Element.

E = m ⋅ c 2
<text y="40" x="40" font-size="2em">
    E = m ⋅ c<tspan dy="-20" font-size="60%">2</tspan>
</text>
Ti+2 = Ti + Ti+1

Das Attribut baseline-shift funktioniert in Safari, aber nicht in Firefox – weder baseline-shift="sub" noch baseline-shift="super".

<text x="10" y="25" font-size ="20">
    T<tspan baseline-shift = "sub">i+2</tspan>
    = T<tspan baseline-shift = "sub">i</tspan>
    + T<tspan baseline-shift = "sub">i+1</tspan>
</text>

Quelle: Stackoverflow

SVGTEXT made of 100% pure TEXT Stulpenhandschuhe.pdf Berlin Emma Erste Schritte.pdf Grömitz 733 KB 18 MB 254,8 GB 3 KB 10,6 MB Marinde Marie Noel Martinus Emma Watson W. Winter Alice Text auf dem rechten Pfad Text rotieren Text rotieren Text rotieren Text rotieren Text rotieren Text rotieren Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren