Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 5   

5.2 Globale Formatierung durch externe Style-Datei

Einer der schönsten Vorteile bei der Verwendung von CSS-Formatvorlagen bietet die Möglichkeit, Style-Vorschriften in eine externe Datei auszulagern. Diese Datei kann auf diese Weise von beliebigen SVG Dokumenten verwendet werden.

Sie können Stylevorschriften einfach als Textdatei mit der Dateinamenerweiterung .css abspeichern. Im folgenden Beispiel beinhaltet diese Textdatei nur 2 Zeilen, nämlich die Stylevorschrift für das rect-Element und die allgemeine Unterklasse blauTransparent.

   rect {fill:yellow; stroke:black; stroke-width:.1cm;}
   .blauTransparent {fill:blue; stroke:black; opacity:.4;}

Dieser Datei wurde im Beispiel der Namen "kap4_2.css" gegeben.

Die so erzeugte CSS-Datei "kap4_2.css" wird direkt nach der einleitenden XML-Deklaration durch die XML-Anweisung <?xml-stylesheet ?> in das SVG-Dokument eingebunden.

Innerhalb dieser Anweisung wird mit Hilfe des Attributs type der MIME-Type der exteren Style-Datei (text/css) angebegen. Die Datei selbst wird durch das Attribut href, das als Wert den Speicherort der Datei d.h eine URI enthält, referenziert. In unserem Fall befindet sich die CSS-Datei im gleichen Verzeichnis wie die SVG Grafik, daher muß lediglich der Name der CSS-Datei als Wert für href angegeben werden.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<?xml-stylesheet type="text/css" href="kap4_2.css" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>die xml-stylesheet Anweisung</title>
  <desc>Stylevorschriften mit CSS in einer externen Datei</desc>

  <!-- zwei gleich angemalte Rechtecke -->
  <rect x="50" y="50" width="125" height="100" />
  <rect x="225" y="50" width="125" height="100" />

  <!-- ein überlappender Kreis mit Transparenz -->
  <circle cx="200" cy="100" r="95"
    class="blauTransparent" />
</svg>
      



index  |  Kapitel 5  |  5.1  <<  | 5.2 |  >>  6   Hyperlinks