<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> SVG-Element definiert ein Grafikobjekt, das in wiederholten x- und y-Koordinatenintervallen („gekachelt“) gezeichnet werden kann, um einen Bereich abzudecken.

Das <pattern> wird von den Attributen fill und/oder stroke auf anderen Grafikelementen referenziert, um diese Elemente mit dem referenzierten Muster zu füllen oder zu umrahmen.

Beispiele

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 des Musterkachels. Werttyp: <length>; Standardwert: 0; Animierbar: ja
href: Dieses Attribut verweist auf ein Vorlagenmuster, das Standardwerte für die <pattern>-Attribute bereitstellt. Werttyp: <URL>; Standardwert: keiner; Animierbar: ja
patternContentUnits: Dieses Attribut definiert das Koordinatensystem für den Inhalt des <pattern>. Werttyp: userSpaceOnUse|objectBoundingBox; Standardwert: userSpaceOnUse; Animierbar: ja

Hinweis: Dieses Attribut hat keine Wirkung, wenn ein viewBox-Attribut auf dem <pattern>-Element angegeben ist.
patternTransform: Dieses Attribut enthält die Definition einer optionalen zusätzlichen Transformation vom Musterkoordinatensystem auf das Zielkoordinatensystem. Werttyp: <transform-list>; Standardwert: Identitätstransformation; Animierbar: ja
patternUnits: Dieses Attribut definiert das Koordinatensystem für die Attribute x, y, width und height. Werttyp: userSpaceOnUse|objectBoundingBox; Standardwert: objectBoundingBox; Animierbar: ja
preserveAspectRatio: Dieses Attribut definiert, wie das SVG-Fragment verformt werden muss, wenn es in einem Container mit einem anderen Seitenverhältnis eingebettet ist. Werttyp: (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-Anzeigefensters für das Musterfragment. Werttyp: <list-of-numbers> ; Standardwert: keiner; Animierbar: ja
width: Dieses Attribut bestimmt die Breite des Musterkachels. Werttyp: <length> ; Standardwert: 0; Animierbar: ja
x: Dieses Attribut bestimmt die x-Koordinatenverschiebung des Musterkachels. Werttyp: <length> ; Standardwert: 0; Animierbar: ja
xlink:href Veraltet: Dieses Attribut verweist auf ein Vorlagenmuster, das Standardwerte für die <pattern>-Attribute bereitstellt. Werttyp: <URL>; Standardwert: keiner; Animierbar: ja

Hinweis: Für Browser, die href implementieren, wird xlink:href ignoriert und nur href verwendet, wenn sowohl href als auch xlink:href gesetzt sind.
y: Dieses Attribut bestimmt die y-Koordinatenverschiebung des Musterkachels. Werttyp: <length> ; Standardwert: 0; Animierbar: ja

Verwendungskontext

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # PatternElement

Browser-Kompatibilität

BCD tables only load in the browser