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 Januar 2020.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die scaleSelf() Methode der DOMMatrix-Schnittstelle ist eine veränderbare Transformationsmethode, die eine Matrix durch Anwendung eines angegebenen Skalierungsfaktors modifiziert, zentriert auf dem angegebenen Ursprung, mit einem Standardursprung von (0, 0), und gibt die skalierte Matrix zurück.
Um eine Matrix zu skalieren, ohne sie zu verändern, siehe DOMMatrixReadOnly.scale(), die eine neue skalierte Matrix erstellt, während das Original unverändert bleibt.
Syntax
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
scaleXOptional-
Ein Multiplikator für den Skalierungswert auf der x-Achse. Falls nicht angegeben, beträgt der Standardwert
1. scaleYOptional-
Ein Multiplikator für den Skalierungswert auf der y-Achse. Falls nicht angegeben, entspricht der Standardwert dem von
scaleX. scaleZOptional-
Ein Multiplikator für den Skalierungswert auf der z-Achse. Wenn dieser Wert nicht
1ist, wird die resultierende Matrix 3D sein. originXOptional-
Eine x-Koordinate für den Ursprung der Transformation. Falls kein Ursprung angegeben ist, beträgt der Standardwert 0.
originYOptional-
Eine y-Koordinate für den Ursprung der Transformation. Falls kein Ursprung angegeben ist, beträgt der Standardwert 0.
originZOptional-
Eine z-Koordinate für den Ursprung der Transformation. Falls kein Ursprung angegeben ist, beträgt der Standardwert 0. Wenn dieser Wert nicht
0ist, wird die resultierende Matrix 3D sein.
Rückgabewert
Gibt sich selbst zurück; eine DOMMatrix.
Wenn eine Skalierung auf der z-Achse angewendet wird, wird die Matrix eine 4✕4 3D-Matrix sein.
Beispiele
Dieses SVG enthält zwei halbtransparente Quadrate, eines rot und eines blau, die beide am Dokumentursprung positioniert sind:
<svg viewBox="0 0 50 50" height="200">
<rect width="25" height="25" fill="#ff000099" />
<rect id="transformed" width="25" height="25" fill="#0000ff99" />
</svg>
Dieses JavaScript erstellt zuerst eine Matrix und skaliert dann die Matrix zu einer, die die Breite halbiert und die Höhe verdoppelt, unter Verwendung der Methode scaleSelf().
Die Matrix wird dann auf das blaue Quadrat als transform angewendet, was dessen Abmessungen und Position verändert. Das rote Quadrat bleibt unverändert.
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
DOMMatrixReadOnly.scale()DOMMatrix.scale3dSelf()- CSS
transformEigenschaft und diescaleSelf()undmatrix()Funktionen - CSS-Transformationen Modul
- SVG
transformAttribut CanvasRenderingContext2DSchnittstelletransform()Methode