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 ein Mustertile angewendet werden.

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

<pattern>

Beispiel

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>

Muster

Für <pattern> definiert patternTransform eine Liste von Transformationsdefinitionen, die auf ein Mustertile angewendet werden.

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

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

Transformationsfunktionen

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # PatternElementPatternTransformAttribute

Browser-Kompatibilität

BCD tables only load in the browser