SVG Tutorial

Außer dem Attribut writing-mode, das einziges Attribut der Attributgruppe PresentationAttributes-TextElements ist, gehören alle weiteren Attribute dieses Kapitels der Attributgruppe PresentationAttributes-TextContentElements an.

• Laufrichtung - writing-mode
• Orientierung - glyph-orientation-horizontal und glyph-orientation-vertical
• Bidirektionalität - unicode-bidi und direction
• Textbündigkeit - text-anchor
• Textdekoration - text-decoration

writing-mode
Voreinstellung: lr-tb (left-right/top-bottom).
Die Laufrichtung eines Textes können Sie mit dem Attribut writing-mode bestimmen. Dieses Attribut ist das einzige Attribut der Attributgruppe PresentationAttributes-TextElements.
Die wichtigsten Werte für dieses Attribut sind:

• rl - right-left: von rechts nach links
• lr - left-right: von links nach rechts
• tb - top-bottom: von oben nach unten
• bt - bottom-top: von unten nach oben

glyph-orientation-horizontal
Voreinstellung: 0.
Die Orientierung (Rotation) der einzelnen Zeichen kann bei den Laufrichtungen lr und rl mit dem Attribut glyph-orientation-horizontal, bestimmt werden.
Der Wert für dieses Attribut gibt in jeweils 90 deg-Schritten (deg = Grad) die Orientierung der Zeichen an. Mögliche Werte sind also 0, 90, 180, 270 und 360.

glyph-orientation-vertical
Voreinstellung: 90.
Die Orientierung (Rotation) der einzelnene Zeichen kann bei den Laufrichtungen tb und bt mit dem Attribut glyph-orientation-vertical bestimmt werden.
Auch der Wert für dieses Attribut gibt in jeweils 90 deg-Schritten (deg = Grad) die Orientierung der Zeichen an. Mögliche Werte sind also 0, 90, 180, 270 und 360.

unicode-bidi
Voreinstellung: normal.
Bidirektionalität bedeutet (visuell) die Zeichen in Spiegelschrift darzustellen.
Durch das Attribut unicode-bidi können Sie die normale Darstellung der Zeichen, die in Abhängigkeit von der System-Sprache automatisch verwendet wird, aufheben. Verwenden Sie hierfür den Wert bidi-override.
Erst dann können Sie mit Hilfe des Attributs direction die die Direktionalität verändern.

direction
Voreinstellung: ltr (left-to-right).
Nach Aufhebung der normalen Zeichendarstellung durch Verwendung des Attributs unicode-bidi mit dem Wert bidi-override, kann man mit dem Attribut direction die Direktionalität verändern.
Mögliche Werte sind:

• ltr - left to right: von links nach rechts und
• rtl - right to left: von rechts nach links

text-anchor
Voreinstellung: start.
Die Textbündigkeit oder Ausrichtung von Text wird durch das Attribut text-anchor festgelegt. Im obigen Beispiel sehen Sie die Darstellung einer Zeichenkette bei Verwendung der für dieses Atrribut möglichen Werte: begin, middle und end.

text-decoration
Voreinstellung: none.
Textdekoration findet durch das Attribut oder die Eigenschaft text-decoration statt.
Sie können mit dieser Eigenschaft Linien am Text erzeugen, also unterstrichenen und durchgestrichenen Text, aber auch Text mit einer oberen Linie oder sogar blinkenden Text, wenn es der Browser will ... Dabei sind die möglichen Werte

• none - keine Formatierung.
• underline - erzeugt unterstrichenen Text, und
• overline - Linie oberhalb des Textes.
• line-through - durchgestrichenen Text.
• blink - blinkender Text.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="360">
<title>Ausrichtung und Leerzeichen</title>
<desc>Laufrichtung, Orientierung, Bidirektionalität, Textbündigkeit, Leerzeichen</desc>
  <defs>
    <style type="text/css"><![CDATA[
      text {font-family:Verdana,sans-serif;
            font-size:20px;}
    ]]></style>
  </defs>

<!-- Laufrichtung, Orientierung, Bidirektionalität 1 -->
  <text x="30" y="40"
    writing-mode="tb">
    top bottom
  </text>
  <text x="60" y="40"
    writing-mode="tb" glyph-orientation-vertical="0">
    top bottom
  </text>
  <text x="90" y="40"
    writing-mode="tb" glyph-orientation-vertical="270">
    top bottom 270
  </text>
  <text x="120" y="40"
    writing-mode="tb" glyph-orientation-vertical="270"
    unicode-bidi="bidi-override" direction="rtl">
    top bottom 270 right to left
  </text>

<!-- Laufrichtung, Orientierung, Bidirektionalität 2 -->
  <g fill="red">
    <text x="270" y="60"
      writing-mode="rl">
      right left
    </text>
    <text x="270" y="90"
      writing-mode="lr">
      left right
    </text>
    <text x="270" y="120"
      writing-mode="lr" glyph-orientation-horizontal="180">
      left right 180
    </text>
    <text x="270" y="150"
      writing-mode="lr" glyph-orientation-horizontal="180"
      unicode-bidi="bidi-override" direction="rtl">
      left right 180 right to left
    </text>
    <line x1="270" y1="40" x2="270" y2="160" stroke="black" />
  </g>

<!-- Textbündigkeit links, mittig, rechts -->
  <g fill="blue">
    <text x="220" y="230" text-anchor="begin">
      begin
    </text>
    <text x="220" y="260" text-anchor="middle">
      middle
    </text>
    <text x="220" y="290" text-anchor="end">
      end
    </text>
    <line x1="220" y1="200" x2="220" y2="310" stroke="black" />
  </g>

<!-- text-decoration -->
  <text x="330" y="240"
    text-decoration="underline">underline</text>
  <text x="330" y="270"
    text-decoration="line-through">line-through</text>
  <text x="330" y="300"
    text-decoration="overline">overline</text>
  <text x="330" y="330"
    text-decoration="blink">blink (vielleicht)</text>
</svg>
      

Im obigen Beispiel wird zuerst ein Text durch die Verwendung des Attributs writing-mode mit dem Wert tb zuerst 4 mal von oben nach unten verlaufend dargestellt, wobei die Orientierung der Zeichen der ersten Zeichenkette 90 Grad beträgt - Standardwert von glyph-orientation-vertical.
Die Orientierung der Zeichen in der zweiten Zeichenkette beträgt 0 Grad, die Zeichen stehen aufrecht.
In der dritten Zeichenkette wurde die Orientierung der Zeichen auf 270 Grad eingestellt. Wie Sie im Beispiel sehen, wird jedes einzelne Zeichen um 270 Grad gedreht, so dass "quasi" eine Spiegelschrift erzeugt wurde.
Die vierte Zeichenkette verdeutlicht die Bedeutung der Attribute unicode-bidi und direction. Hier wurde die Direktionalität rtl, von rechts nach links, eingestellt. Auf diese Weise wird die Zeichenkette wieder "entspiegelt".

Die erste der darauffolgenden 4 Zeichenketten zeigt die Darstellung der Zeichen, wenn die Laufrichtung von rechts nach links verwendet wird, also die Anwendung des Attributs writing-mode mit dem Wert rl.
Bei den folgenden drei Zeichenketten werden wieder Orientierung, diesmal mit dem Attribut glyph-orientation-horizontal und Bidirektionalität der Zeichen manipuliert.

Nachfolgend finden Sie 2 Beispielblöcke zur Verwendung des Attributs text-anchor mit allen möglichen Werten und des Attributs text-decoration, ebenfalls mit allen möglichen Werten.