patternTransform

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:

Beispiele

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

No specification found

No specification data found for undefined.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser-Kompatibilität