|
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>
| 
