SVG/Farben/Kontur mit Muster

Aus SELFHTML-Wiki
< SVG‎ | Farben
Wechseln zu: Navigation, Suche

Sie können auch die Kontur um ein Objekt mit einem Muster ausfüllen, indem sie der stroke-Eigenschaft eine Referenz auf ein pattern (Muster) geben.

Beispiel ansehen …
<pattern id="muster1" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
  <circle cx="10" cy="10" r="5" fill="#dfac20" stroke-width="1" stroke="#3983ab"></circle>
</pattern>

<pattern id="muster2" x="10" y="10" width="10" height="10" patternUnits="userSpaceOnUse">
  <rect id="square" width="5" height="5" fill="#3983ab" />
  <use xlink:href="#square" transform="translate(5,5)" />
</pattern>

<pattern id="muster3" x="10" y="10" width="18" height="12" patternUnits="userSpaceOnUse">
  <circle cx="9" cy="11" r="10" fill="none" stroke="black"></circle>
</pattern>
Im Beispiel sehen Sie je drei Rechtecke und mit Bézier-Kurven gebogene Pfade, deren Konturen, bzw. Pfadverläufe mit einem Muster gefüllt werden.
  • Das erste Muster besteht aus einer gepunkteten Reihe, deren Punkte durch fill und none zweifarbig sind. Dies ließe sich nicht mit stroke-dasharray realisieren.
  • Das zweite Muster besteht aus einem Schachbrettmuster. Um die Musterdefinition so einfach wie möglich zu halten, wurde die Größe des Musters halbiert, sodass nur ein use-Element benötigt wurde.
  • Das dritte Muster sollte eigentlich Briefmarkenzacken nachempfunden sein. Wie Sie aber auch schon bei den vorherigen Mustern sehen, bleibt die Ausrichtung immer am Koordinatensystem und nicht an einer Richtungsänderung des Pfadverlaufs orientiert.
Beachten Sie: Bei der Positionierung der Muster müssen Sie die Strichbreite der Linien, Größe und Position der pattern-Kacheln in Einklang bringen.