Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 12

12.3 Muster - das pattern-Element

Ein Muster ist die Wiederholung eines besonderen Symbols, das aus beliebigen SVG-Objekten (Grundformen, Pfade, Animationen, etc.) bestehen kann. Dieses "Mustersymbol" - Pattern - kann man sich als eine einzelne Kachel vorstellen, mit der Elemente gekachelt werden können.

Die Möglichkeit Muster zu realisieren stellt das pattern-Element zur Verfügung. Dieses Element ist lediglich ein Container-Element, das im defs-Container platziert werden sollte.

Mit dem Element pattern definieren Sie ein besonderes Symbol - eben ein Muster. Daher können Sie innerhalb des pattern-Containers alle SVG-Elemente zur Erzeugung von geometrischen Formen, Pfade und sogar Animationen verwenden.

Mit Hilfe der Attribute width und height legen Sie die Ausmaße des Symbols fest - also die Größe der einzelnen Kachel.

Die Attribute x und y legen fest, an welchem Punkt die erste Kachel platziert wird. Falls sie x und/oder y nicht verwenden, wird die Voreinstellung 0 verwendet. Größere Werte als die Breite und/oder die Höhe des gesamten Musters machen hier keinen Sinn, da "in alle Richtungen gekachelt" wird.

Durch die zwei möglichen Werte objectBoundingBox (Voreinstellung) und userSpaceOnUse des Attributs patternUnits können Sie festlegen, wie die Werte von x, y, width und height interpretiert werden sollen.
In der Voreinstellung objectBoundingBox werden relative Werte (0 bis 1 oder 0% bis 100%) erwartet, die sich auf das Koordinatensystem des zu füllenden Elements beziehen.
Durch Verwendung von userSpaceOnUse werden die Werte als absolute Werte im Koordinatensystem des zu füllenden Elements interpretiert (siehe folgendes Beispiel).

Elemente, die ein Muster als Füllung erhalten sollen, müssen es mit Hilfe einer eindeutigen ID referenzieren können. Deshalb müssen Sie dem pattern-Element in jedem Fall durch das id-Attribut einen eindeutigen Namen zuordnen.

Über diese ID wird das Muster dann als Wert für die Eigenschaft fill von einem Element oder Objekt referenziert: fill:url(#pattern-id) oder fill="url(#pattern-id)".

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Das pattern-Element</title>
<desc>Muster definieren und verwenden</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:38px;
            font-weight:bold; stroke:black;}
    ]]>
    </style>

    <pattern id="muster"
      patternUnits="userSpaceOnUse"
      width="10" height="10"
      x="0" y="0">
      <line x1="5" y1="0" x2="5" y2="10"
        stroke="lightgray" />
      <line x1="0" y1="5" x2="10" y2="5"
        stroke="lightgray" />
    </pattern>
    <pattern id="muster_a"
      patternUnits="userSpaceOnUse"
      width="10" height="10"
      x="0" y="0">
      <rect x="0" y="0" width="10" height="10"
        fill="white" />
      <circle cx="5" cy="5" r="5"
        fill="lightgray" stroke="red" />
    </pattern>
    <pattern id="muster_b"
      patternUnits="userSpaceOnUse"
      width="10" height="10"
      x="5" y="5">
      <rect x="0" y="0" width="10" height="10"
        fill="white" />
      <circle cx="5" cy="5" r="5"
        fill="lightgray" stroke="red" />
    </pattern>
    <pattern id="muster_c"
      patternUnits="userSpaceOnUse"
      width="6" height="6"
      x="0" y="0">
      <rect x="0" y="0" width="6" height="6"
        fill="limegreen" />
      <circle cx="3" cy="3" r="2.2"
        fill="black" />
    </pattern>
  </defs>

  <rect x="10" y="10" width="180" height="180"
    fill="url(#muster)" />
  <text x="90" y="180"
    style="fill:url(#muster_a); font-size:220px;">!</text>
  <text x="20" y="180"
    style="fill:url(#muster_b); font-size:220px;">!</text>
  <text x="20" y="140"
    transform="rotate(-20,20,140)"
    style="fill:url(#muster_c);">MUSTER</text>
</svg>
      

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.




index  |  Kapitel 12  |  12.2  <<  | 12.3 |  >>  13   Animationen