SVG/Element/pattern

Der Begriff pattern ist mehrdeutig.
Für pattern (engl. für Muster) siehe auch

• HTML/Attribute/pattern (Formulareingabe prüfen)

Das pattern-Element legt Muster zentral im Definitionsabschnitt fest und weist diese dem Element über eine ID zu.

Syntax

Start-Tag: notwendig

End-Tag: notwendig

Elternelemente

Darf vorkommen in:
defs

erlaubte Inhalte

Animationselemente

• Beschreibungs-Elemente
• grafische Elemente (Grundformen)
• a, clipPath, filter, foreignObject, image, linearGradient, marker, mask, pattern, radialGradient, script, style, switch, text, view

Attribute

Name	Inhalt	Standardwert	Bedeutung
height	NUMBER	0	Höhe
href	CDATA
patternUnits	userSpaceOnUse, objectBoundingBox	objectBoundingBox	für x, y, width, height
patternContentUnits	userSpaceOnUse, objectBoundingBox	userSpaceOnUse	nur wenn das Attribut viewBox fehlt
patternTransform	CDATA
preserveAspectRatio	align, meetOrSlice	xMidYMid meet
width	NUMBER	0	Breite
viewBox	NUMBER		Koordinaten­system der Musterelemente
x	NUMBER	0	X-Koordinate
y	NUMBER	0	Y-Koordinate

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

  <defs>
    <pattern id="muster1" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" />
    </pattern>
  </defs>

  <rect id="eins" x="10" y="10"  width="160" height="200" fill="url(#muster1)" />

Im Definitionsabschnitt wird ein Muster mit einer unverwechselbaren id festgelegt. Anschließend wird ein Rechteck gezeichnet. Als Füllung wird mit dem fill-Attribut das Muster mit seiner ID geladen.

Siehe auch

• SVG/Tutorials/Muster
  • SVG/Tutorials/Muster/Kachelungen
  • SVG/Tutorials/Muster/unregelmäßige Muster

Weblinks

• W3C: Pattern Element