<pattern>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

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

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

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>`

Attribute

height: Dieses Attribut bestimmt die Höhe der Mustergrafik. Werttyp: <length>; Standardwert: 0; Animierbar: ja
href: Dieses Attribut referenziert ein Vorlagenmuster, das Standardwerte für die <pattern> Attribute bereitstellt. Werttyp: <URL>; Standardwert: none; 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: identity transform; 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 verzerrt 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 den Rahmen des SVG-Viewports für das Musterfragment. Werttyp: <list-of-numbers>; Standardwert: none; Animierbar: ja
width: Dieses Attribut bestimmt die Breite der Mustergrafik. Werttyp: <length>; Standardwert: 0; Animierbar: ja
x: Dieses Attribut bestimmt die x-Koordinatenverschiebung der Mustergrafik. Werttyp: <length>; Standardwert: 0; Animierbar: ja
xlink:href Veraltet: Dieses Attribut referenziert ein Vorlagenmuster, das Standardwerte für die <pattern> Attribute bereitstellt. Werttyp: <URL>; Standardwert: none; Animierbar: ja

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

DOM-Schnittstelle

Dieses Element implementiert die SVGPatternElement Schnittstelle.

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>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # PatternElement

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden