SVG/Tutorials/Text/mehrsprachiger Text

Aus SELFHTML-Wiki
< SVG‎ | Tutorials‎ | Text
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
10min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
SVG
● JavaScript


Will man eine Grafik mit Text versehen, dessen Sprache sich an die Systemsprache des Betrachters anpasst, so kann man dafür eine Kombination aus Switch-Element und dem Attribut systemLanguage nutzen. Innerhalb eines Switch-Elements werden mehrere direkte(!) Tochterelemente mit verschiedenen Sprachcodes aufgereiht.

Beispiel
<switch>
  <text x="100" y="100" systemLanguage="de">Es grünt so grün wenn Spaniens Blüten blühen.</text>
  <text x="100" y="100" systemLanguage="en">The rain in Spain stays mainly in the plain.</text>
</switch>

Sollen mehrere Texte in jeweils mehreren Sprachen integriert werden, so erfolgt die Auswahl mit Hilfe von Gruppierung:

Beispiel
<switch>
  <g systemLanguage="de">
    <text x="100" y="100">Es grünt so grün wenn Spaniens Blüten blühen.</text>
    <text x="100" y="150">Ich glaub, jetzt hat sie's!</text>
  </g>
  <g systemLanguage="en">
    <text x="100" y="100" systemLanguage="en">The rain in Spain stays mainly in the plain.</text>
    <text x="100" y="150">I think, she's got it!</text>
  </g>
</switch>

Je nachdem, ob das Betriebssystem auf Deutsch oder Englisch eingestellt ist, werden nur die Elemente der entsprechenden Version angezeigt, weshalb sie z.B. gleiche Koordinaten haben können.