SVG Tutorial

Das switch-Element wertet die Testattribute systemLanguage, requiredFeatures oder requiredExtensions seiner direkten Kindelemente in ihrer Reihenfolge aus.
Nur das erste (!) Kindelement, bei dem alle verwendeten Testattribute true zurückliefern, wird am Bildschirm dargestellt.

Alle (!) anderen bzw. weiteren Kindelemente werden nicht dargestellt, ungeachtet ob auch deren Testattribute true zurückliefern.

Falls es sich bei einem Kindelement von switch um ein Container-Element (wie das g-Element) handelt, werden alle Elemente innerhalb dieses Containers angezeigt.

Nachfolgend 3 Beispiele, welche die Verwendung der 3 unterschiedlichen Testattribute zeigen.

Im ersten Beispiel wird, je nach der im System eingestellten Sprache, ein entsprechendes Länderkürzel angezeigt. Dazu wird das Test-Attribut systemLanguage verwendet, das eine zulässiges Länderkürzel wie de, en, fr, etc. als Wert akzeptiert.
Die Darstellung von Text in SVG Dokumenten wird im nächsten Kapitel erläutert.

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="200" height="200"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das switch-Element</title>
<desc>eine Auswahl nach der Systemsprache</desc>

<defs>
  <style type="text/css">
  <![CDATA[
    text {font-family:verdana,sans-serif; font-size:20px; font-weight:bold;}
    circle {fill:lightgreen; stroke:black;}
  ]]>
  </style>
</defs>

<!-- der switch Bereich -->
<switch>
  <g systemLanguage="en">
    <circle cx="100" cy="95" r="20" />
    <text x="87" y="102">en</text>
  </g>

  <g systemLanguage="de">
    <circle cx="100" cy="95" r="20" />
    <text x="87" y="102">de</text>
  </g>

  <g systemLanguage="fr">
    <circle cx="100" cy="95" r="20" />
    <text x="87" y="102">fr</text>
  </g>
</switch>
</svg>
      

Im zweiten Beispiel wird das Test-Attribut requiredFeatures verwendet. Damit kann überprüft werden, ob der User Agent ein bestimmtes Feature von SVG, wie z.B. Verläufe oder Animationen unterstützt.
Die zulässigen Werte für dieses Attribut, sogenannte feature strings, unterscheiden sich jedoch in den SVG Standards.

In SVG 1.0 werden feature strings mit folgender Präfix verwendet:
org.w3c.svg.
So ist z.B. org.w3c.svg.static eine gültige Wertzuweisung fü requiredFeatures nach SVG 1.0 und bedeutet, dass die grundlegenden Möglichkeiten des SVG Standards unterstützt werden müssen.
Dazu gehören: Grundlegende Datentypen, Elemente der Dokumentstruktur, CSS-Unterstützung, Transformationen, Pfade, Marker, geometrische Formen, Text, Attribute für Painting, Verläufe und Muster, Masken, Filter und SVG Fonts.
Dazu gehören nicht: Erzeugung einer DOM-Struktur für Skriptsprachen, Animationen und Hyperlinks.

In SVG 1.1 werden feature strings mit folgender Präfix verwendet:
http://www.w3.org/TR/SVG11/feature#.
So ist z.B. http://www.w3.org/TR/SVG11/feature#SVG-static eine gültige Wertzuweisung für requiredFeatures nach SVG 1.1 und bedeutet ebenfalls, dass die grundlegenden Möglichkeiten des SVG Standards unterstützt werden müssen.
In SVG 1.1 ist allerdings eine größere Anzahl von feature strings verfügbar, wobei man die unterschiedlichen Möglichkeiten auch einzeln abfragen kann (z.B. nur Gradienten oder Text). Dies macht eine genauere Überprüfung der vom User Agent unterstützten SVG Features möglich.

Eine ausführliche Beschreibung der feature strings finden Sie in der W3C SVG 1.1 Recommendation - Appendix O: Feature Strings.

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="200" height="200"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das switch-Element 2</title>
<desc>eine Auswahl nach unterstützten Features</desc>

<defs>
  <style type="text/css">
  <![CDATA[
    text {font-family:verdana,sans-serif; font-size:20px; font-weight:bold;}
  ]]>
  </style>
 <linearGradient id="lgr1"
   x1="0" y1="0" x2="1" y2="0">
   <stop offset="0" stop-color="limegreen" />
   <stop offset="1" stop-color="yellow" />
 </linearGradient>
</defs>

<switch>
<!-- feature string nach SVG 1.0 -->
<!-- Anzeige der folgenden Gruppe, wenn z.B. Grandienten unterstützt werden -->
  <g requiredFeatures="org.w3c.svg.static">
    <g>
      <circle cx="100" cy="95" r="60" fill="url(#lgr1)" />
      <text x="100" y="102" text-anchor="middle">feature</text>
    </g>
  </g>

<!--Anzeige der folgenden Gruppe, im Sonst-Fall -->
  <g>
    <g>
      <circle cx="100" cy="95" r="60" fill="red" />
      <text x="100" y="102" text-anchor="middle">nix feature</text>
    </g>
  </g>
</switch>
</svg>
      

Im letzten Beispiel wird das Test-Attribut requiredExtensions verwendet. Damit kann überprüft werden, ob der User Agent bestimmte SVG Erweiterungen unterstützt.
Das Attribut requiredExtensions benötigt eine URL, die i.d.R. einen Namensraum bezeichnet, als Wertzuweisung.

Im folgenden SVG Dokument wird überprüft ob der User Agent die Hyperlink-Erweiterungen des Adobe SVG Viewers unterstützt (was nur der Fall ist, wenn sie diesen Viewer verwenden). Im Ja-Fall wird - nach notwendiger Downloadzeit - eine kurze mp3-Sound-Datei immer wieder abgespielt und ein passender Text angezeigt.

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="200" height="100"
  xmlns:a="http://www.adobe.com/svg10-extensions" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das switch-Element 3</title>
<desc>eine Auswahl nach unterstützten SVG Erweiterungen</desc>

<defs>
  <style type="text/css">
  <![CDATA[
    text {font-family:verdana,sans-serif; font-size:20px; font-weight:bold;}
  ]]>
  </style>
</defs>

<switch>
<!-- Abspielen eines Sounds und Anzeige eines Textes -->
<!-- wenn die Hyperlink-Erweitungen des Adobe SVG Viewers unterstützt werden -->
  <g requiredExtensions="http://www.adobe.com/svg10-extensions">
    <a:audio xlink:href="sound64.mp3" begin="0" volume="10" repeatCount="indefinite" />
    <text x="100" y="60" text-anchor="middle">Sound in SVG</text>
  </g>

<!-- Nur Anzeige eines Textes, im Sonst-Fall -->
  <g>
    <text x="100" y="60" text-anchor="middle">kein Sound</text>
  </g>
</switch>
</svg>