Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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 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
html,
body,
svg {
height: 100%;
}
<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
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # PatternElementPatternTransformAttribute |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.