patternTransform
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Das patternTransform-Attribut definiert eine Liste von Transformationsdefinitionen, die auf ein Musterkachel angewendet werden.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
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>
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 ein Musterkachel angewendet werden.
Hinweis:
Ab SVG2 ist es auch erlaubt, die CSS-Eigenschaft transform zu verwenden. Der aktuelle Stand der Implementierung 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, lesen Sie die Definition des transform-Attributs.
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # PatternElementPatternTransformAttribute |
Browser-Kompatibilität
Loading…