DOMMatrix: scaleSelf() Methode

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.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die scaleSelf() Methode des DOMMatrix-Interfaces ist eine veränderbare Transformationsmethode, die eine Matrix durch Anwenden eines angegebenen Skalierungsfaktors modifiziert, zentriert auf den gegebenen Ursprung, mit einem Standardursprung von (0, 0), und die skalierte Matrix zurückgibt.

Um eine Matrix zu skalieren, ohne sie zu verändern, siehe DOMMatrixReadOnly.scale(), die eine neue skalierte Matrix erstellt, während die ursprüngliche unverändert bleibt.

Syntax

js
scaleSelf()
scaleSelf(scaleX)
scaleSelf(scaleX, scaleY)
scaleSelf(scaleX, scaleY, scaleZ)
scaleSelf(scaleX, scaleY, scaleZ, originX)
scaleSelf(scaleX, scaleY, scaleZ, originX, originY)
scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)

Parameter

scaleX Optional

Ein Multiplikator für den Skalierungswert auf der x-Achse. Falls nicht angegeben, wird standardmäßig 1 verwendet.

scaleY Optional

Ein Multiplikator für den Skalierungswert auf der y-Achse. Falls nicht angegeben, wird standardmäßig der Wert von scaleX verwendet.

scaleZ Optional

Ein Multiplikator für den Skalierungswert auf der z-Achse. Wenn dieser Wert nicht 1 ist, wird die resultierende Matrix 3D sein.

originX Optional

Eine x-Koordinate für den Ursprung der Transformation. Falls kein Ursprung angegeben ist, wird standardmäßig 0 verwendet.

originY Optional

Eine y-Koordinate für den Ursprung der Transformation. Falls kein Ursprung angegeben ist, wird standardmäßig 0 verwendet.

originZ Optional

Eine z-Koordinate für den Ursprung der Transformation. Falls kein Ursprung angegeben ist, wird standardmäßig 0 verwendet. Wenn dieser Wert nicht 0 ist, wird die resultierende Matrix 3D sein.

Rückgabewert

Gibt sich selbst zurück; eine DOMMatrix.

Wenn eine Skalierung um die z-Achse angewendet wird, ist die Matrix eine 4✕4 3D-Matrix.

Beispiele

Dieses SVG enthält zwei halbtransparente Quadrate, eines rot und eines blau, die jeweils am Dokumentursprung positioniert sind:

html
<svg viewBox="0 0 50 50" height="200">
  <rect width="25" height="25" fill="#f009" />
  <rect id="transformed" width="25" height="25" fill="#00f9" />
</svg>

Dieses JavaScript erstellt zuerst eine Matrix und skaliert dann die Matrix so, dass die Breite halbiert und die Höhe verdoppelt wird, unter Verwendung der scaleSelf()-Methode.

Die Matrix wird dann auf das blaue Quadrat als transform angewendet, wodurch sich die Abmessungen und die Position ändern. Das rote Quadrat bleibt unverändert.

js
const matrix = new DOMMatrix();
matrix.scaleSelf(0.5, 2);

document
  .querySelector("#transformed")
  .setAttribute("transform", matrix.toString());

Spezifikationen

Specification
Geometry Interfaces Module Level 1
# dom-dommatrix-scaleself

Browser-Kompatibilität

Siehe auch