patternTransform

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 patternTransform-Attribut definiert eine Liste von Transformationsdefinitionen, die auf eine Kachel eines Musters angewendet werden.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

<pattern>

Beispiele

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

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Apply a transform on the tile -->
  <pattern
    id="p1"
    width=".25"
    height=".25"
    patternTransform="rotate(20)
                      skewX(30)
                      scale(1 0.5)">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Apply the transformed pattern tile -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
</svg>

Elemente

Sie können dieses Attribut mit den in den folgenden Abschnitten beschriebenen SVG-Elementen verwenden.

`<pattern>`

Für <pattern> definiert patternTransform eine Liste von Transformationsdefinitionen, die auf eine Kachel eines Musters angewendet werden.

Hinweis: Ab SVG2 ist es auch erlaubt, die CSS-Eigenschaft transform zu verwenden. Der aktuelle Zustand der Implementierung ist jedoch nicht sehr gut. Aus Gründen der Abwärtskompatibilität wird dringend empfohlen, das patternTransform-Attribut weiterhin zu verwenden.

Wert	<transform-list>
Standardwert	Identitätstransformation
Animierbar	Ja

Transformationsfunktionen

Um mehr über die Definition von Transformationsfunktionen zu erfahren, siehe die Definition des Attributs transform.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # PatternElementPatternTransformAttribute

Browser-Kompatibilität

BCD tables only load in the browser