Mit Pattern (Muster) lassen sich Flächen oder Linien in SVG füllen. So lässt sich wie im folgenden Beispiel auf einfache Weise eine Fläche mit kariertem Hintergrund erstellen.
Innerhalb der Definitionen (<defs>-Element) wird das <pattern>-Element angelegt. Über das Attribut id wird später das Muster referenziert. Die Attribute width und height legen die Größe der Musterfläche fest. Im <pattern>-Element wird ein Rechteck mit einer Breite und Höhe von 20 Pixeln und dem Ursprung x,y = 0,0 angelegt. Das Rechteck wird mit einer grauen Linie, einer Linienstärke von 0,5 und einer Füllfarbe Weiß formatiert.
<defs>
<pattern id="q20px" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="20" height="20" stroke="grey" stroke-width="0.5" fill="white"/>
</pattern>
</defs>
Pattern mit fill-attribute verwenden
Mit Hilfe des fill-Attributes wird das Pattern einem SVG-Element zugewiesen. Im Beispiel wird ein Rechteck mit einer Größe von 400 x 400 Pixeln angelegt und mit dem zuvor erstellten Muster gefüllt.
fill=“url(#q20px)“ füllt das Rechteck mit dem Muster.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="320" height="320">
<defs>
<pattern id="q20px" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="20" height="20" stroke="grey" stroke-width="0.5" fill="white"/>
</pattern>
</defs>
<rect x="0" y="0" rx="0" ry="0" width="320" height="320" fill="url(#q20px)" stroke="none"/>
</svg>
Ergebnis
Auf der linken Seite siehst du das Ergebnis des obigen Quelltextes. Rechts daneben habe ich einen Kreis und ein abgerundetes Quadrat platziert.
Beispiel Schachbrettmuster
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="400" height="400">
<defs>
<pattern id="bwsquare50px" width="100" height="100" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="50" height="50" stroke="none" fill="#f0c30e"/>
<rect x="50" y="0" width="50" height="50" stroke="none" fill="#d25300"/>
<rect x="0" y="50" width="50" height="50" stroke="none" fill="#d25300"/>
<rect x="50" y="50" width="50" height="50" stroke="none" fill="#f0c30e"/>
</pattern>
</defs>
<rect x="0" y="0" rx="0" ry="0" width="400" height="400" fill="url(#bwsquare50px)" stroke="grey" stroke-width="2"/>
</svg>
Beispiel Würfel in verschiedenen Farbvarianten
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="300" height="300">
<defs>
<pattern id="cube" width="50px" height="86.52px" patternUnits="userSpaceOnUse">
<polygon id="top" fill="#FCCB4F" points="50,0 50,0 25,14.43 0,0"/>
<polygon id="topleft" fill="#F8B334" points="25,14.43 25,43.298 0,28.858 0,0"/>
<polygon id="topright" fill="#F9E532" points="50,0.021 50,28.868 25,43.298 25,14.43 "/>
<polygon id="midleft" fill="#FCCB4F" points="25,43.298 0,57.715 0,28.868"/>
<polygon id="midright" fill="#FCCB4F" points="50,28.868 50,57.758 25,43.298"/>
<polygon id="bottomleft" fill="#F9E532" points="25,43.362 25,72.156 0,86.52 0,86.52 0,57.715"/>
<polygon id="bottomright" fill="#F8B334" points="50,57.715 50,86.52 50,86.52 25,72.156 25,43.298"/>
<polygon id="bottom" fill="#FCCB4F" points="50,86.52 0,86.52 25,72.156 25,72.156"/>
</pattern>
</defs>
<rect x="0" y="0" rx="0" ry="0" width="300" height="300" fill="url(#cube)" stroke="none"/>
</svg>
Weitere Details zur Arbeit mit Pattern findest du hier: