Ein Muster erzeugen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Wenn Sie schöne Muster mit Bézierkurven erzeugen möchten, um Sie bspw. als Seitenbanner einer Webseite zu verwenden, benötigen Sie in der Regel eine Füllung. Dazu sollten Sie wissen, wie Pfade gefüllt werden. Grundsätzlich gilt folgende Regel: Wenn ein Pfad geschlossen ist, dass heißt Anfangs- und Entpunkt stimmen überein, wird der Pfad innerhalb der Umrandung, die der Pfad definiert, gefüllt.

Wenn der Pfad nicht geschlossen ist, wird der Teil des Pfades gefüllt, der sich ergeben würde, wenn Sie den Pfad mit dem z-Befehl schließen würden. Bei Kurven oder Schlangenlinien kann das zu unerwünschten Ergebnissen führen, sodass Sie hier unter Umständen einen Pfad manuell schließen müssen, um die gewünschte Füllung zu erreichen.

Eine einfache Schlangenlinie würde bspw. wie in folgender Abbildung gefüllt werden.

Ein gefüllter Pfad aus Bèzierkurven

Abbildung: Ein gefüllter Pfad aus Bèzierkurven.

Mit den nachfolgend geschilderten Schritten wird ein Muster entstehen, das neben Bézierkurven auch einfache Transparenzen verwendet. Es sollte dann folgendermaßen aussehen:

Zu erzeugendes Muster aus drei Pfaden

Abbildung: Zu erzeugendes Muster aus drei Pfaden.

Sie benötigen für dieses Muster eigentlich nichts weiter als drei fast identische Pfade, die Sie füllen und übereinander positionieren.

Hinweis:
Sie benötigen drei Pfade, weil diese mit unterschiedlichen Füllfarben versehen werden sollen. Ansonsten hätten Sie auch die Möglichkeit, alle drei nachfolgend dargestellten <path>-Tags in einem <path>-Tag zusammenzufasssen.

Jeder einzelne Pfad setzt sich wiederum aus einzelnen Elementen zusammen, die mit Hilfe von q- und t-Anweisungen jeweils ein s-förmiges Element mit Füllung erzeugen. Am Ende der gewünschten Breite wird bis zum Anfang das entsprechende Gegenstück erzeugt. Beides, das Element und sein Gegenstück, zeigt die folgende Abbildung.

Elemente, aus denen sich das Muster zusammensetzt

Abbildung: Elemente, aus denen sich das Muster zusammensetzt.

Das obere Element wird durch die Anweisung:

<path d="M0 0 q+50 +50 +100 +0 t+100 +0" style="stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.5;fill:cyan;fill-opacity:0.5"/>

erzeugt. Für das untere Elemente müssen die Vorzeichen für die X-Koordinaten der Zielpositionen und die Vorzeichen für die X- und Y-Koordinaten der Kontrollpunkte vertauscht werden. Das dazu notwendige d-Attribut lautet also:

d="M200 100 q-50 +50 -100 +0 t-100 +0"

Hinweis:
Wenn Sie die Elemente hintereinander wiederholen und nicht als getrennte Elemente definieren, brauchen Sie natürlich für das untere Elemente keine Anfangsposition mit der M-Anweisung bestimmen, weil sich die aus der Endposition des vorherigen Elements ergibt.

Für den mittleren Pfad müssen Sie außerdem ein Element mehr definieren, da er ja früher beginnt und später aufhört.

<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500">
  <g transform="translate(0,55)">
    <path d="M0 0 q+50 +50 +100 +0 t+100 +0 q+50 +50 +100 +0 t+100 +0 q+50 +50 +100 +0 t+100 +0 q-50 +50 -100 +0 t-100 +0 q-50 +50 -100 +0 t-100 +0 q-50 +50 -100 +0 t-100 +0" style="stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.5;fill:cyan;fill-opacity:0.5"/>  
    <path d="M50 -25 q+50 +50 +100 +0 t+100 +0 q+50 +50 +100 +0 t+100 +0 q-50 +50 -100 +0 t-100 +0 q-50 +50 -100 +0 t-100 +0" style="stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.5;fill:orange;fill-opacity:0.3"/>
    <path d="M50 25 q+50 +50 +100 +0 t+100 +0 q+50 +50 +100 +0 t+100 +0 q-50 +50 -100 +0 t-100 +0 q-50 +50 -100 +0 t-100 +0" style="stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.5;fill:yellow;fill-opacity:0.3"/>
  </g>
</svg>

Für die Formatierung der einzelnen Pfade sorgt jeweils das style-Attribut. Es enthält neben den bereits bekannten Angaben zum Festlegen der Randbreite auch Informationen über die Transparenz von Rändern und Füllungen.

style="stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.5;fill:cyan;fill-opacity:0.5"

Die Transparenz der Füllung wird für den ersten Pfad, der in der Abbildung in der Mitte zu sehen ist, mit fill-opacity:0.5 auf 50% festgelegt. Auf den gleichen Wert wird auch die Transparenz der Umrandung mit stroke-opacity:0.5 gesetzt.

Hinweis:
Wenn Sie gleiche Werte für die Transparenz von Umrandung und Füllung verwenden möchten, können Sie auch die getrennten Angaben weglassen und die Transparenz des kompletten Elements mit opacity:0.5 festlegen. Wenden Sie diese Einstellung jedoch auf eine ganze Gruppe an, führt dies zu unterschiedlichen Ergebnissen. Bei fill-opacity:0.5 würden die Füllungen der einzelnen Elemente durcheinander durchscheinen. Bei opacity:0.5 würden jedoch die einzelnen Elemente deckend gezeichnet, die ganze Gruppe wäre jedoch gegenüber anderen Elementen und Gruppen 50% transparent.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de