SVG/Elemente/Text

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können in SVG-Grafiken Text einbinden.[1] Im Unterschied zu anderen Grafikformaten steht Text in SVG zum Indizieren mit Suchmaschinen, Bearbeiten durch Scriptprogramme und zum Kopieren in die Zwischenablage zur Verfügung.

weitere Text-Elemente


Inhaltsverzeichnis

[Bearbeiten] Das text-Element

Mit dem text-Element können Sie beliebigen Text in Grafiken darstellen.

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Attribute sind nötig:

  • x: Koordinate(n) des linken Textrandes (Wenn mehrere Werte in der Form "x1, x2, x3, ..., xn" bzw. "y1, y2, y3, ..., yn" angegeben werden, beziehen sie sich auf die einzelnen Zeichen.)
  • y: Koordinate(n) des unteren Textrandes


Folgende Angaben sind optional:

  • dx (Standardwert 0) horizontale Verschiebung einer oder mehrere Werte
  • dy: vertikale Verschiebung einer oder mehrere Werte, die mit einem Komma oder einem Leerzeichen voneinander getrennt sein müssen
  • lengthAdjust: ob nur Zeichenabstand oder auch Zeichen angepasst werden sollen
  • rotate: Drehung des Texts oder einzelner Buchstaben
  • textLength: Länge des Texts
  • inline-size: Neu in SVG 2: Angabe einer Breitenangabe, um mehrzeiligen Text zu ermöglichen


Beispiel ansehen …
  <text id="eins" x="10" y="40">
    TEXT in
  </text>
 
  <text id="zwei" x="200 240 280" y="100 120 140">
    SVG
  </text>
 
  <text id="drei" x="20"  y="250">&hellip; und alles geht!</text>
  <line x1="10" y1="250" x2="150" y2="250" style="stroke: #000000"/>
Der zweite Text mit der id="zwei" hat mehrere Angaben zu den x- und y-Koordinaten, so dass die einzelnen Zeichen versetzt dargestellt werden. Des Weiteren sind die Buchstaben transparent und nur der Umriss ist durch stroke sichtbar. Der dritte Text (id="drei") hat die gleiche y-Koordinate wie die Linie - während die Linie sie aber als oberen Rand ansieht, ist es beim text-Element die y-Position der Grundlinie.
Beachten Sie: Anders als bei anderen SVG-Elementen gibt der y-Wert die Position der Grundlinie an. Besitzt also y den Wert 0, befindet sich die Grundlinie am obersten Rand der Grafik und der daraufstehende Text ist nicht sichtbar.
Empfehlung: Die Höhe und Breite des Textes können nicht festgelegt werden, sondern hängen von der Schriftart, -größe und anderen Formatierungen ab. Formatieren Sie Texteigenschaften soweit wie möglich mittels CSS.

Folgende Eigenschaften können Sie mit CSS festlegen:

[Bearbeiten] Text-Eigenschaften

[Bearbeiten] Verschiebung mit dx,dy

Mit den Eigenschaften dx und dy können Sie einzelne Zeichen eines Textes im Verhältnis zu ihrem x- oder y-Wert verschieben.[2]

Folgende optionale Angaben sind möglich:

  • dx (Standardwert 0) einer oder mehrere Werte
  • dy: einer oder mehrere Werte, die mit einem Komma oder einem Leerzeichen voneinander getrennt sein müssen
Beispiel ansehen …
  <text x="100" y="100" dx="0 0 0 -340" dy="0 0 0 -30">
    SVG (nach vorne verschoben)
  </text>
Beachten Sie: Beinhalten die Listen weniger Werte als Zeichen im Text vorhanden sind, orientieren sich die nachfolgenden Zeichen an der Position ihrer Vorgänger.

Es ist eher unüblich, Text aus seinem semantischen Zusammenhang heraus zu verschieben. Eine Anwendungsmöglichkeit von dy findet sich beim Rotieren von Text, damit der Mittelpunkt der Rotation sich nicht an der Grundlinie des Textes befindet. Die Angabe dy="0.35em" zentriert das text- oder tspan-Element vertikal [3].

[Bearbeiten] Rotation

Mit der Eigenschaft rotate drehen Sie einzelne bzw. eine Folge von Zeichen.

Folgende Angaben sind möglich:

  • rotate: Gradzahl der Drehung, positive oder negative Zahl von 0-360 (einer oder mehrere Werte, die mit einem Komma oder einem Leerzeichen voneinander getrennt sein müssen)
Beachten Sie: Beinhalten die Listen weniger Werte als Zeichen im Text vorhanden sind, orientieren sich die nachfolgenden Zeichen am Wert ihrer Vorgänger.
Beispiel ansehen …
  <text x="0" y="100"
    dx="10 10 10 10 10 10 10 10 10 10 10 10 15 15 15 15 15 15"
    rotate="0 10 -10 10 -10 10 -10 20 -20 20 -20 20 -30 30 -30 30 -30 30">
    Jetzt geht's rund!
  </text>

[Bearbeiten] Laufrichtung

Mit der Eigenschaft writing-mode können Sie die Laufrichtung eines Textes verändern bzw. dessen Grundlinie neu ausrichten. Dies ist bei manchen Sprachen wie Hebräisch und Arabisch (rechts nach links) oder asiatischen Sprachen (von oben nach unten) wichtig.

  • SVG 1.1
  • Chrome
  • Leer
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • lr: (Standardwert) von links nach rechts[4]
  • rl: rechts nach links
  • tb: von oben nach unten


Beispiel ansehen …
  <text x="20" y="20" writing-mode="lr">
    Selfhtml
  </text>
 
  <text x="320" y="50" writing-mode="rl">
    סאלפהטמל
  </text>
  <text x="320" y="80" writing-mode="rl">
    right-to-left
  </text>
 
  <text x="20" y="90" writing-mode="tb">
    top-bottom
  </text>
Beachten Sie: Firefox unterstützt diese Eigenschaft überhaupt nicht, so sollte es aussehen:

Screenshot Laufrichtung‎

Empfehlung: Alternativ können Sie eine vertikale Laufrichtung erreichen, indem Sie

[Bearbeiten] Orientierung

Mit den Eigenschaften glyph-orientation-horizontal (bei writing-mode:lr bzw. rl) und glyph-orientation-vertical (bei writing-mode:tb) können Sie bei geänderter Laufrichtung die einzelnen Zeichen entsprechend drehen. Die Eigenschaft wird nur im Zusammenhang mit der passenden Laufrichtung ausgeführt, ohne Angabe von writing-mode wird sie ignoriert.

  • SVG 1.1
  • Chrome
  • Leer
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • Gradzahl: (Standardwert 0) 0, 90, 180, 270. Andere Angaben werden auf den nächsten zulässigen Wert aufgerundet.
Beispiel ansehen …
  <text x="20" y="10" writing-mode="tb">
    TOP-BOTTOM
  </text>
  <text x="80" y="10" writing-mode="tb" glyph-orientation-vertical="0">
    TOP-BOTTOM
  </text>
  <text x="140" y="10" writing-mode="tb" glyph-orientation-vertical="180">
    TOP-BOTTOM
  </text>
  <text x="200" y="10" writing-mode="tb" glyph-orientation-vertical="270">
    TOP-BOTTOM
  </text>
Beachten Sie: Firefox unterstützt diese Eigenschaft überhaupt nicht, so sollte es aussehen:

Screenshot writing-mode

[Bearbeiten] Bidirektionalität

Mit der Eigenschaft direction (analog der CSS-Eigenschaft: direction) können Sie die Laufrichtung manuell beeinflussen.

Folgende Angaben sind möglich:

  • ltr: (Standardwert) von links nach rechts
  • rtl: von rechts nach links

Um eine Festlegung von direction zu ermöglichen, muss die Eigenschaft unicode-bidi gesetzt werden.

Folgende Angaben sind möglich:

  • normal: (Standardwert)
  • ltr: bidi-override (überschreibt vorgegebene Laufrichtung)
Beispiel ansehen …
  <text x="210" y="30" direction="rtl" unicode-bidi="bidi-override">
    andersrum!
  </text>
  <text x="260" y="100" direction="rtl" unicode-bidi="bidi-normal">
    andersrum!
  </text>
Beachten Sie das Ausrufezeichen im unteren Text. Mit unicode-bidi: bibi-normal ändern die Satzzeichen, aber nicht die Buchstaben ihre Laufrichtung.

[Bearbeiten] Grundlinienverschiebung

Mit der Eigenschaft baseline-shift können Sie die Grundlinie des Textes so verschieben, dass Sie hoch- oder tiefgestellten Text anzeigen können.

  • SVG 1.1
  • Chrome
  • Leer
  • Leer
  • Opera
  • Safari

Folgende Einstellungen sind möglich:

  • baseline (Standardwert)
  • super: hochgestellter Text
  • sub: tiefgestellter Text
  • Längenangabe
Beispiel ansehen …
    <text x="10" y="40">
      E = mc<tspan class="super">2</tspan>
    </text>
    <text x="10" y="80">
      CH<tspan class="sub">4</tspan> 
      + 2O<tspan class="sub">2</tspan>
      → CO<tspan class="sub">2</tspan> + 2H<tspan class="sub">2</tspan>O
    </text>
    <text x="10" y="200">
      H
      <tspan style="baseline-shift:-15;">a</span>
      <tspan style="baseline-shift:0;">L</tspan>
      <tspan style="baseline-shift:10;">L</tspan>
      <tspan style="baseline-shift:0;">O</tspan>
    </text>
Beachten Sie: Firefox und Internet Explorer unterstützen diese Eigenschaft nicht, so sollte es aussehen:

Screenshot Grundlinienverschiebung

[Bearbeiten] Schriftdehnung

Mit der Eigenschaft font-stretch (vergleiche: CSS-Eigenschaft font-stretch) können Sie die Schriftbreite festlegen. Dabei bleibt die Schrifthöhe davon unberührt.

  • SVG 1.1
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Folgende Einstellungen sind möglich:

  • normal (Standardwert)
  • wider: breiter
  • narrower: schmaler
  • ultra-condensed: sehr zusammengestaucht
  • extra-condensed:
  • condensed: gestaucht
  • semi-condensed:
  • semi-expanded:
  • expanded: auseinander gezogen
  • extra-expanded
  • ultra-expanded
Beispiel
   <text x="10" y="30" style="font-stretch="ultra-condensed">
    Gestauchter Text
  </text>
  <text x="10" y="60">
    Normaler Text
  </text>
  <text x="10" y="90" style="font-stretch="ultra-expanded">
    Gedehnter Text
  </text>
Beachten Sie: Keiner der gängigen Browser unterstützt diese Eigenschaft. Alternativ könnten Sie Text mit transform="scale(x y)" stauchen oder dehnen.

[Bearbeiten] Textausrichtung

Mit der Eigenschaft text-anchor können Sie Text links-, rechtsbündig und mittig ausrichten.

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • start (Standardwert) Text liegt rechts des Ankerpunkts x
  • middle: Ankerpunkt liegt in der Mitte des Textes
  • end: Text liegt links des Ankerpunktes X
Beachten Sie: dass Text in SVG keine feste Breite hat. Bezugspunkt für die Textausrichtung ist der Ankerpunkt X. Eine Einstellung text-anchor="end" sorgt dafür, dass der Text links der X-Koordinate angezeigt wird. Unter Umständen muss dann der Wert für X verändert werden, damit der Text nicht aus dem sichtbaren Bereich verschwindet.
Sinnvoll ist text-anchor="middle", da man damit Text z.B. in Kreisen oder Ellipsen trotz unterschiedlicher Länge mittig ausrichten kann und so einfach den X-Wert des Hintergrund-Elements übernehmen kann.
Beispiel ansehen …
    <text x="200" y="50" text-anchor="start">
      start
    </text>
    <text x="200" y="100" text-anchor="middle">
      middle
    </text>
    <text x="200" y="150" text-anchor="end">
      end
    </text>
 
    <g>
      <text x="250" y="250">Anwendungsbeispiel:</text>
      <text x="250" y="280">KFZ-Nationalitätenkennzeichen</text>
      <ellipse cx="100" cy="400" rx="40" ry="25"/>
      <text x="100" y="410">B</text>
    </g>
    <g>
      <ellipse cx="300" cy="350" rx="40" ry="25"/>
      <text x="300" y="360">NL</text>
    </g>
    <g>
      <ellipse cx="500" cy="400" rx="40" ry="25"/>
      <text x="500" y="410">LUX</text>
    </g>

[Bearbeiten] Wortabstand

Mit der Eigenschaft word-spacing können Sie wie bei der gleichnamigen CSS-Eigenschaft den Abstand zwischen den Wörtern im Text bestimmen.

  • SVG 1.1
  • Chrome
  • Leer
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • eine numerische Angabe, jedoch kein Prozentwert, auch negative Angaben mit Größenangabe


Beispiel ansehen …
  <text x="100" y="100" word-spacing="-5px">
    Beispieltext mit geringem Wortabstand
  </text>
  <text x="100" y="200">
    Beispieltext mit normalem Wortabstand
  </text>
  <text x="100" y="300" word-spacing="1em">
    Beispieltext mit großem Wortabstand
  </text>
Beachten Sie: Im Unterschied zu anderen Attributen benötigt word-spacing eine Größenangaben (px, em ...). Ein reiner Zahlenwert, der normalerweise Pixel bedeutet, wird ignoriert.

[Bearbeiten] Zeichenabstand

Mit der Eigenschaft letter-spacing können Sie wie bei der gleichnamigen CSS-Eigenschaft den Abstand zwischen den Buchstaben bzw. Zeichen im Text bestimmen.

  • SVG 1.1
  • Chrome
  • Leer
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:


Beispiel ansehen …
  <text x="100" y="100" letter-spacing="-2.5">
    Beispieltext
  </text>
  <text x="100" y="200">
    Beispieltext
  </text>
  <text x="100" y="300" letter-spacing="2.5">
    Beispieltext
  </text>

[Bearbeiten] Kerning

Mit dem kerning-Attribut können Sie festlegen, wie die Unterschneidung dargestellt werden soll.

Hinweis

In SVG2 wird dieses Attribut aus dem Standard entfernt.[6] Verwenden Sie die CSS-Eigenschaft letter-spacing.
  • SVG 1.1
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Folgende Angaben sind möglich:

  • auto: (Standardwert) Kerning-Tabelle der aktuellen Schriftart wird benutzt
  • 0: kein kerning
  • Zahlenwert: positive und negative Zahlenangaben


Beispiel
  <text x="10" y="100" kerning="auto">
    Beispieltext 
  </text>
  <text x="10" y="200" kerning="0">
    Beispieltext
  </text>
  <text x="10" y="250" kerning="3">
    Beispieltext
  </text>

[Bearbeiten] Quellen

  1. http://www.w3.org/TR/SVG/text.html
  2. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dx
  3. https://github.com/mbostock/d3/wiki/SVG-Shapes#svg_text
  4. https://developer.mozilla.org/de/docs/Web/CSS/writing-mode
  5. http://jsfiddle.net/hx5Th/11/
  6. http://www.w3.org/TR/SVG2/single-page.html#text-SpacingProperties

[Bearbeiten] Referenz

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML