CSS, HTML und Javascript mit {stil}

SVG Pattern

SVG pattern füllt einen Hintergrund oder ein Element mit der Wiederholung eines Musters. Das Muster kann aus mehreren Objekten bestehen, die in einem pattern-Element sitzen. Ein Pattern braucht eine id (z.b. »grid«) und wird erst sichtbar, wenn ein Objekt durch fill: url(#grid) mit dem Muster gefüllt wird.

Durch das mehrschichte SVG-Koordinatensystem mit seinen Units und Größen ist pattern nicht gerade intuitiv, aber Muster sind ein mächtiges Konzept, dass die Menge der Tags und die Größe der Grafik in Schach hält. pattern bildern Hintergrundbilder und vermeiden Wiederholungen von aufwändigen Formen.

Ein einfaches Raster (grid), gut für manuelle Entwürfe geeignet, wenn kein grafisches Tool wie Inkscape oder Adobe Illustrator benutzt wird.

0 25 50 75 100 125 150 175
<svg width="100%" height="100%" viewBox="0 0 600 300">
<style>text { font-size:12px; fill: #ccc}</style>
  <pattern id="grid"
           width="25" height="25"
           patternUnits="userSpaceOnUse" >
      <line x1="1" x2="25" y1="0" y2="0" stroke="#EDF0DE" stroke-width="1" />
      <line x1="0" x2="0" y1="1" y2="25" stroke="#EDF0DE" stroke-width="1" />
  </pattern>
</defs>

<rect x="0" y="0" width="600" height="300"
    style="stroke: #000000; fill: url(#grid);" />
</svg>

pattern beschreibt die Koordinaten und die Größe eines Musters und wird mit Formen gefüllt:

  • width und height legen die Abmessung einer Kachel des Musters fest,
  • x und y geben an, wo die erste Kachel platziert ist. Wenn x und y nicht aufgeführt werden, gilt x="0" und y="0".

Das id-Attribut muss gesetzt sein, damit sich ein Element, das mit einem Muster gefüllt wird, auf das Muster beziehen kann.

patternContentUnits="userSpaceOnUse" oder "objectBoundingBox"

patternUnits / patternContentUnits

  • objectBoundingBox (default) erwartet relative Werte zwischen 0 und 1, die als 0 bzw. 100% interpretiert werden.
  • userSpaceOnUse benutzt absolute Werte im Koordinatensystem des gefüllten Objekts.

patternTransform

patternTransform rotiert, skaliert und verschiebt ein Pattern in seinem Objekt.

0
<pattern id="tria" width="30" height="30" 
         patternUnits="userSpaceOnUse" 
         patternTransform="rotate(35)">
         oder
         patternTransform="scale(0.5, 0.5)">

Ein Pattern kann selber mit einem Pattern gefüllt sein.

Attribute für SVG pattern

id
Eindeutige Referenz des Musters
patternUnits
userSpaceOnUse oder objectBoundingBox (default objectBoundingBox)
patternTransform
Muster transformieren: rotieren, skalieren, verschieben
x, y
Offset des Musters vom Ursprung des SVG-Koordinatensystems (default 0,0)
width, height
Breite und Höhe des Musters (default 100%, 100%)
viewBox
Viewport innerhalb des SVG-Bereichs mit 4 kommagetrennten Werten (min x, min y, width, height)
xlink:href
Referenz auf ein weiteres Muster, dessen Attribute als Default benutzt werden