Homepage-Webhilfe Event-Banner

Stylesheet

In SVG-Dokumenten haben Sie die Möglichkeit, CSS zu nutzen, um die Elemente zu stylen. Dabei kommen nicht die „normalen Eigenschaften“ von CSS für HTML zum Einsatz. Vielmehr ist es möglich, dass alle Präsentationsattribute (wie z. B. fill, stroke, stroke-width, font-family und transform) auch als CSS-Eigenschaften notiert werden können. Um ein Element mit CSS zu stylen, können Sie, wie in HTML auch, das Attribut style verwenden. Die Notation fill="red" hat also die gleiche Auswirkung wie style="fill: red;". In CSS können wie gewohnt Element-Selektoren, Klassifizierungen, Identifikationen, Attribut-Selektoren und Kombinatoren verwendet werden. CSS-Anweisungen können Sie in einem SVG-Dokument, so wie in einem HTML-Dokument auch, im style-Element notieren.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 400">
    <style type="text/css">
    .rot
    {
        stroke: orange;
        stroke-width: 2.5;
        fill: red;
    }
    .blau
    {
        stroke: cyan;
        stroke-width: 2.5;
        fill: blue;
    }
    </style>
    <symbol id="baustein" viewBox="0 0 100 100">
        <rect x="5" y="5" width="90" height="90" rx="5" ry="5" />
    </symbol>
    <rect x="150" y="50" width="300" height="300" fill="black" />
    <use xlink:href="#baustein" class="rot" x="150" y="50" width="100" height="100" />
    <use xlink:href="#baustein" class="blau" x="150" y="150" width="100" height="100" />
    <use xlink:href="#baustein" class="rot" x="150" y="250" width="100" height="100" />
    <use xlink:href="#baustein" class="blau" x="250" y="50" width="100" height="100" />
    <use xlink:href="#baustein" class="rot" x="250" y="150" width="100" height="100" />
    <use xlink:href="#baustein" class="blau" x="250" y="250" width="100" height="100" />
    <use xlink:href="#baustein" class="rot" x="350" y="50" width="100" height="100" />
    <use xlink:href="#baustein" class="blau" x="350" y="150" width="100" height="100" />
    <use xlink:href="#baustein" class="rot" x="350" y="250" width="100" height="100" />
</svg>
Vorschau

Übrigens: Ab SVG 2 können Sie mit CSS sogar die Attributwerte für die Positionierung und Größenangabe setzen. Dies wird jedoch von kaum einem Browser unterstützt.

Möchten Sie die CSS-Anweisungen in einem separaten Dokument notieren, dann können Sie die CSS-Datei über den XML-Verarbeitungshinweis stylesheet einbinden. Als Attribute benötigen Sie href und type.

<?xml-stylesheet href="stylesheet.css" type="text/css" ?>
Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen OK