Text in SVG/mehrsprachiger Text

10min

einfach

• 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 dem switch-Element und dem systemLanguage-Attribut 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.

Wenn keine Sprache passt, wird ohne Fallback gar nichts angezeigt. Als letzte Alternative sollte deshalb ein Element ohne systemLanguage folgen, damit immer ein Text angezeigt wird.