<pattern>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <pattern>-Element definiert ein Grafikobjekt, das in wiederholten x- und y-Koordinatenintervallen („gekachelt“) neu gezeichnet werden kann, um einen Bereich abzudecken.

Das <pattern> wird durch die Attribute fill und/oder stroke auf anderen Grafikelementen referenziert, um diese Elemente mit dem referenzierten Muster zu füllen oder zu umranden.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
    </pattern>
  </defs>

  <circle cx="50" cy="50" r="50" fill="url(#star)" />
  <circle
    cx="180"
    cy="50"
    r="40"
    fill="none"
    stroke-width="20"
    stroke="url(#star)" />
</svg>

Attribute

height: Dieses Attribut bestimmt die Höhe der Musterkachel. Wertetyp: <length>|<percentage>; Standardwert: 0; Animierbar: ja
href: Dieses Attribut referenziert ein Vorlagenmuster, das Standardwerte für die <pattern>-Attribute bereitstellt. Wertetyp: <URL>; Standardwert: none; Animierbar: ja
patternContentUnits: Dieses Attribut definiert das Koordinatensystem für den Inhalt des <pattern>. Wertetyp: userSpaceOnUse|objectBoundingBox; Standardwert: userSpaceOnUse; Animierbar: ja

Hinweis: Dieses Attribut hat keine Auswirkung, wenn ein viewBox-Attribut auf dem <pattern>-Element angegeben ist.
patternTransform: Dieses Attribut enthält die Definition einer optionalen zusätzlichen Transformation vom Musterkoordinatensystem zum Zielkoordinatensystem. Wertetyp: <transform-list>; Standardwert: none; Animierbar: ja
patternUnits: Dieses Attribut definiert das Koordinatensystem für die Attribute x, y, width und height. Wertetyp: userSpaceOnUse|objectBoundingBox; Standardwert: objectBoundingBox; Animierbar: ja
preserveAspectRatio: Dieses Attribut definiert, wie das SVG-Fragment verzerrt werden muss, wenn es in einem Container mit einem unterschiedlichen Seitenverhältnis eingebettet ist. Wertetyp: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Standardwert: xMidYMid meet; Animierbar: ja
viewBox: Dieses Attribut definiert die Begrenzung des SVG-Ansichtsfensters für das Musterfragment. Wertetyp: <list-of-numbers> ; Standardwert: none; Animierbar: ja
width: Dieses Attribut bestimmt die Breite der Musterkachel. Wertetyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja
x: Dieses Attribut bestimmt die x-Koordinatenverschiebung der Musterkachel. Wertetyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja
xlink:href Veraltet: Dieses Attribut referenziert ein Vorlagenmuster, das Standardwerte für die <pattern>-Attribute bereitstellt. Wertetyp: <URL>; Standardwert: none; Animierbar: ja

Hinweis: Bei Browsern, die href implementieren, wird xlink:href ignoriert, wenn sowohl href als auch xlink:href gesetzt sind, und nur href wird verwendet.
y: Dieses Attribut bestimmt die y-Koordinatenverschiebung der Musterkachel. Wertetyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja

Verwendungskontext

Kategorien	Container-Element
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Gradient-Elemente `<a>`, `<clipPath>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # Patterns

Browser-Kompatibilität

BCD tables only load in the browser