SVGPatternElement: patternTransform-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die patternTransform-Eigenschaft nur-lesbar des SVGPatternElement-Interfaces spiegelt das patternTransform-Attribut des gegebenen <pattern>-Elements wider. Diese Eigenschaft hä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, auf der X-Achse um 30 Grad geneigt und um einen Faktor von 1 horizontal und 0,5 vertikal 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

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGPatternElement__patternTransform

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch