[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/de/docs/Web/API/SVGPatternElement/patternTransform [Back]  [Original]

SVGPatternElement: patternTransform-Eigenschaft - Web-APIs | MDN

Dieser Inhalt wurde automatisch aus dem Englischen bersetzt, und kann Fehler enthalten. Erfahre mehr ber dieses Experiment.

View in English Always switch to English

SVGPatternElement: patternTransform-Eigenschaft

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

Die patternTransform-Eigenschaft nur-lesbar des SVGPatternElement-Interfaces spiegelt das patternTransform-Attribut des gegebenen <pattern>-Elements wider. Diese Eigenschaft hlt die auf das Muster selbst angewendete Transformation und ermglicht Operationen wie translate, rotate, scale und skew.

In diesem Artikel

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

Spezifikation
Scalable Vector Graphics (SVG) 2
# __svg__SVGPatternElement__patternTransform

Browser-Kompatibilitt

Siehe auch


Web Proxy Viewer  |  New URL  |  Original Page