Musterelement <pattern>
| Pattern ist die Wiederholung einer Vorlage im viewPort. Das <pattern>-Element wird in einem definierenden Bereich <defs> | <symbol> notiert. und enthält wiederum die zu refenzierenden Elemente. |
|
An diesem Beispiel wird lediglich ein Linienraster erzeugt.
<svg width="322" height="82" >
<defs>
<pattern id="linienraster" patternUnits="userSpaceOnUse"
x="0" y="1" width="10" height="10">
<path d="M 0,0 v10 h10" stroke="#78b" fill="none" />
</pattern>
</defs>
<rect x="0" y="0" width="322" height="82"
fill="url(#linienraster)" />
</svg>
|
( <symbol> wird hier nur von Chrome und Opera akzeptiert! ) <symbol> ist somit nur bedingt einsetzbar und kann <defs> für diese Anwendung nicht ersetzen! |
Attribute: x, y, width und height positionieren und dimensionieren das Muster (alles wie gehabt). Ein zweites Raster ist noch darüber gelegt: <path d="M 0,0 v50 h50" stroke="#679" fill="none" />
patternUnits = "userSpaceOnUse" interpretiert die Werte als absolut
"objectBoundingBox" - relative Werte (0 bis 1 oder 0% bis 100%)
Mit der Referenz id erhält das darstellende Element die Eigenschaft. <element fill="url(#id)" />
Ein Stein wird geformt und gefiltert und im <pattern>-Element mit der ID "#ziegel" erfasst. Zwei Rechtecke werden mittels fill="url(#ziegel)" gefüllt. Die zweite Reihe beginnt x="25" (der halbe Stein) und wird nach links verschoben: transform="translate(-25)". Beide Reihen befinden sich in der Gruppe id="alle_steine" und sollen nun mit <use> und mit einem y-Versatz den viewPort füllen.
Ansicht des Quellcodes
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.
Dokument geändert am: 07. Aug. 2016 10:37