SVGPatternElement: patternTransform-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die schreibgeschützte Eigenschaft patternTransform der Schnittstelle SVGPatternElement spiegelt das Attribut patternTransform des betreffenden <pattern>-Elements wider. Diese Eigenschaft enthält die auf das Muster selbst angewendete Transformation und ermöglicht Operationen wie translate, rotate, scale und skew.
Wert
Ein SVGAnimatedTransformList-Objekt.
Beispiel
In diesem Beispiel wird das Muster um 20 Grad gedreht, entlang der X-Achse um 30 Grad geschert und horizontal mit dem Faktor 1 sowie vertikal mit dem Faktor 0,5 skaliert:
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>
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__patternTransform |