Schlagwort: Pattern

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:

http://www.w3.org/TR/SVG/pservers.html#Patterns