<pattern>

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

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

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%;
}

<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

Browser-Kompatibilität