patternTransform
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Das Attribut patternTransform definiert eine Liste von Transformationen, die auf eine Musterkachel angewendet werden.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Elemente
Sie können dieses Attribut mit den SVG-Elementen verwenden, die in den folgenden Abschnitten beschrieben werden.
<pattern>
Für <pattern> definiert patternTransform eine Liste von Transformationen, die auf eine Musterkachel angewendet werden.
Hinweis:
Seit SVG2 kann auch die CSS-Eigenschaft transform verwendet werden. Allerdings ist der aktuelle Stand der Implementierung nicht besonders gut. Aus Gründen der Abwärtskompatibilität wird dringend empfohlen, weiterhin das Attribut patternTransform zu verwenden.
| Wert | <transform-list> |
|---|---|
| Standardwert | Identitätstransformation |
| Animierbar | Ja |
Beispiele
<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>
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # PatternElementPatternTransformAttribute |