Ein Muster ist die Wiederholung eines besonderen Symbols, das aus beliebigen SVG-Objekten
(Grundformen, Pfade, Animationen, etc.) bestehen kann.
Dieses "Mustersymbol" - Pattern - kann
man sich als eine einzelne Kachel vorstellen, mit der Elemente gekachelt werden können.
Die Möglichkeit Muster zu realisieren stellt das
pattern-Element zur Verfügung. Dieses Element
ist lediglich ein Container-Element, das im
defs-Container platziert werden
sollte.
Mit dem Element pattern
definieren Sie ein besonderes Symbol - eben ein Muster. Daher können Sie
innerhalb des pattern-Containers alle SVG-Elemente zur Erzeugung von
geometrischen Formen, Pfade und sogar Animationen verwenden.
Mit Hilfe der Attribute width und
height legen Sie die Ausmaße des Symbols
fest - also die Größe der einzelnen Kachel.
Die Attribute x und
y legen fest, an welchem Punkt die
erste Kachel platziert wird. Falls sie x
und/oder y
nicht verwenden, wird die Voreinstellung 0 verwendet.
Größere Werte als die Breite und/oder die Höhe des gesamten Musters
machen hier keinen Sinn, da "in alle Richtungen gekachelt" wird.
Durch die zwei möglichen Werte
objectBoundingBox (Voreinstellung)
und userSpaceOnUse des Attributs
patternUnits können Sie festlegen, wie die
Werte von x, y,
width und height
interpretiert werden sollen.
In der Voreinstellung objectBoundingBox werden relative Werte
(0 bis 1 oder 0% bis 100%) erwartet, die sich auf das Koordinatensystem des zu füllenden
Elements beziehen.
Durch Verwendung von userSpaceOnUse werden die Werte als
absolute Werte im Koordinatensystem des zu füllenden Elements interpretiert (siehe
folgendes Beispiel).
Elemente, die ein Muster als Füllung erhalten sollen, müssen es mit Hilfe einer eindeutigen
ID referenzieren können. Deshalb müssen Sie dem pattern-Element in jedem
Fall durch das
id-Attribut einen eindeutigen Namen zuordnen.
Über diese ID wird das Muster dann als Wert für die Eigenschaft fill
von einem Element oder Objekt referenziert:
fill:url(#pattern-id) oder fill="url(#pattern-id)".
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?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 pattern-Element</title>
<desc>Muster definieren und verwenden</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:38px;
font-weight:bold; stroke:black;}
]]>
</style>
<pattern id="muster"
patternUnits="userSpaceOnUse"
width="10" height="10"
x="0" y="0">
<line x1="5" y1="0" x2="5" y2="10"
stroke="lightgray" />
<line x1="0" y1="5" x2="10" y2="5"
stroke="lightgray" />
</pattern>
<pattern id="muster_a"
patternUnits="userSpaceOnUse"
width="10" height="10"
x="0" y="0">
<rect x="0" y="0" width="10" height="10"
fill="white" />
<circle cx="5" cy="5" r="5"
fill="lightgray" stroke="red" />
</pattern>
<pattern id="muster_b"
patternUnits="userSpaceOnUse"
width="10" height="10"
x="5" y="5">
<rect x="0" y="0" width="10" height="10"
fill="white" />
<circle cx="5" cy="5" r="5"
fill="lightgray" stroke="red" />
</pattern>
<pattern id="muster_c"
patternUnits="userSpaceOnUse"
width="6" height="6"
x="0" y="0">
<rect x="0" y="0" width="6" height="6"
fill="limegreen" />
<circle cx="3" cy="3" r="2.2"
fill="black" />
</pattern>
</defs>
<rect x="10" y="10" width="180" height="180"
fill="url(#muster)" />
<text x="90" y="180"
style="fill:url(#muster_a); font-size:220px;">!</text>
<text x="20" y="180"
style="fill:url(#muster_b); font-size:220px;">!</text>
<text x="20" y="140"
transform="rotate(-20,20,140)"
style="fill:url(#muster_c);">MUSTER</text>
</svg>
Zur Transformation von Mustern benötigt man - wie bei Verläufen - ein
besonderes Attribut, das im
Element pattern platziert wird.
Bei Mustern heißt es patternTransform.
patternTransform aktzeptiert die gleichen Werte und
ist daher genauso anzuwenden wie die Attribute
transform oder gradientTransform.
|