-
Notifications
You must be signed in to change notification settings - Fork 22.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
97dc5e9
commit 735185a
Showing
10 changed files
with
560 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| --- | ||
| title: "SVGTransform: angle property" | ||
| short-title: angle | ||
| slug: Web/API/SVGTransform/angle | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.SVGTransform.angle | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The **`angle`** read-only property of the {{domxref("SVGTransform")}} interface represents the angle of the transformation in degrees. | ||
|
|
||
| For `SVG_TRANSFORM_ROTATE`, `SVG_TRANSFORM_SKEWX`, and `SVG_TRANSFORM_SKEWY`, `angle` reflects the transformation's rotation or skewing angle. | ||
|
|
||
| For `SVG_TRANSFORM_MATRIX`, `SVG_TRANSFORM_TRANSLATE` and `SVG_TRANSFORM_SCALE`, `angle` will be zero. | ||
|
|
||
| ## Value | ||
|
|
||
| An `integer`; the angle value in degrees as a float. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Accessing the `angle` property | ||
|
|
||
| ```html | ||
| <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> | ||
| <rect id="rect" x="50" y="50" width="100" height="100" fill="green" /> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ```js | ||
| const rect = document.getElementById("rect"); | ||
| const transformList = rect.transform.baseVal; | ||
|
|
||
| // Create and add a rotation transform | ||
| const rotateTransform = rect.ownerSVGElement.createSVGTransform(); | ||
| rotateTransform.setRotate(45, 100, 100); // Rotate 45 degrees | ||
| transformList.appendItem(rotateTransform); | ||
|
|
||
| // Access the angle property | ||
| console.log(transformList.getItem(0).angle); // Output: 45 | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| --- | ||
| title: "SVGTransform: matrix property" | ||
| short-title: matrix | ||
| slug: Web/API/SVGTransform/matrix | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.SVGTransform.matrix | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The **`matrix`** read-only property of the {{domxref("SVGTransform")}} interface represents the transformation matrix that corresponds to the transformation `type`. | ||
|
|
||
| In case the `matrix` object is changed directly (i.e., without using the methods on the `SVGTransform` interface itself) then the `type` of the `SVGTransform` changes to `SVG_TRANSFORM_MATRIX`. | ||
|
|
||
| - For `SVG_TRANSFORM_MATRIX`, the matrix contains the a, b, c, d, e, f values supplied by the user. | ||
|
|
||
| - For `SVG_TRANSFORM_TRANSLATE`, e and f represent the translation amounts (a=1, b=0, c=0 and d=1). | ||
|
|
||
| - For `SVG_TRANSFORM_SCALE`, a and d represent the scale amounts (b=0, c=0, e=0 and f=0). | ||
|
|
||
| - For `SVG_TRANSFORM_SKEWX` and `SVG_TRANSFORM_SKEWY`, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0). | ||
|
|
||
| - For `SVG_TRANSFORM_ROTATE`, a, b, c, d, e and f together represent the matrix which will result in the given rotation. When the rotation is around the center point (0, 0), e and f will be zero. | ||
|
|
||
| ## Value | ||
|
|
||
| A live {{domxref("DOMMatrix")}} object. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Accessing and Modifying the Matrix | ||
|
|
||
| ```html | ||
| <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> | ||
| <rect id="rect" x="50" y="50" width="100" height="100" fill="red" /> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ```js | ||
| const rect = document.getElementById("rect"); | ||
| const transformList = rect.transform.baseVal; | ||
|
|
||
| // Create and add a rotation transform | ||
| const rotateTransform = rect.ownerSVGElement.createSVGTransform(); | ||
| rotateTransform.setRotate(30, 100, 100); // Rotate 30 degrees | ||
| transformList.appendItem(rotateTransform); | ||
|
|
||
| // Access the matrix | ||
| const matrix = transformList.getItem(0).matrix; | ||
| console.log(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f); | ||
|
|
||
| // Modify the matrix directly | ||
| matrix.a = 2; // Double the horizontal scaling | ||
| console.log(transformList.getItem(0).type); // Output: 1 (SVG_TRANSFORM_MATRIX) | ||
| ``` | ||
|
|
||
| ### Understanding Transformation Types | ||
|
|
||
| ```html | ||
| <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> | ||
| <rect id="rect" x="50" y="50" width="100" height="100" fill="blue" /> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ```js | ||
| const rect = document.getElementById("rect"); | ||
| const transformList = rect.transform.baseVal; | ||
|
|
||
| // Apply a translation transform | ||
| const translateTransform = rect.ownerSVGElement.createSVGTransform(); | ||
| translateTransform.setTranslate(20, 30); | ||
| transformList.appendItem(translateTransform); | ||
|
|
||
| // Access the matrix | ||
| const matrix = transformList.getItem(0).matrix; | ||
| console.log(matrix.e, matrix.f); // Output: 20, 30 | ||
| console.log(transformList.getItem(0).type); // Output: 2 (SVG_TRANSFORM_TRANSLATE) | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{domxref("SVGTransform.type")}} | ||
| - {{domxref("DOMMatrix")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| --- | ||
| title: "SVGTransform: setMatrix() method" | ||
| short-title: setMatrix() | ||
| slug: Web/API/SVGTransform/setMatrix | ||
| page-type: web-api-instance-method | ||
| browser-compat: api.SVGTransform.setMatrix | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The `setMatrix()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_MATRIX`, with parameter `matrix` defining the new transformation. | ||
|
|
||
| Note that the values from the parameter `matrix` are copied, meaning changes to the `matrix` object after calling this method will not affect the transformation. | ||
|
|
||
| ## Syntax | ||
|
|
||
| ```js-nolint | ||
| SVGTransform.setMatrix(matrix) | ||
| ``` | ||
|
|
||
| ### Parameters | ||
|
|
||
| - `matrix` | ||
| - : A live {{domxref("DOMMatrix")}} object defining the new transformation matrix to apply. | ||
|
|
||
| ### Return value | ||
|
|
||
| None ({{jsxref('undefined')}}). | ||
|
|
||
| ### Exceptions | ||
|
|
||
| - `NoModificationAllowedError` {{domxref("DOMException")}} | ||
| - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Setting a Transformation Matrix | ||
|
|
||
| ```js | ||
| // Get an SVG element and create a transform object | ||
| const svgElement = document.querySelector("svg"); | ||
| const transform = svgElement.createSVGTransform(); | ||
|
|
||
| // Create a DOMMatrix with specific values | ||
| const matrix = new DOMMatrix(); | ||
| matrix.a = 1; // Scale X | ||
| matrix.d = 1; // Scale Y | ||
| matrix.e = 50; // Translate X | ||
| matrix.f = 50; // Translate Y | ||
|
|
||
| // Set the transform to the new matrix | ||
| transform.setMatrix(matrix); | ||
|
|
||
| console.dir(transform.matrix); // Output: SVGMatrix { a: 1, b: 0, c: 0, d: 1, e: 50, f: 50 } | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See Also | ||
|
|
||
| - {{domxref("DOMMatrix")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| --- | ||
| title: "SVGTransform: setRotate() method" | ||
| short-title: setRotate() | ||
| slug: Web/API/SVGTransform/setRotate | ||
| page-type: web-api-instance-method | ||
| browser-compat: api.SVGTransform.setRotate | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The `setRotate()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_ROTATE`, with parameter `angle` defining the rotation angle and parameters `cx` and `cy` defining the optional center of rotation. | ||
|
|
||
| ## Syntax | ||
|
|
||
| ```js-nolint | ||
| SVGTransform.setRotate(angle, cx, cy) | ||
| ``` | ||
|
|
||
| ### Parameters | ||
|
|
||
| - `angle` | ||
| - : A float defining the rotation angle in degrees. | ||
| - `cx` {{optional_inline}} | ||
| - : A float defining the X-coordinate of the center of rotation. Defaults to `0`. | ||
| - `cy` {{optional_inline}} | ||
| - : A float defining the Y-coordinate of the center of rotation. Defaults to `0`. | ||
|
|
||
| ### Return value | ||
|
|
||
| None ({{jsxref('undefined')}}). | ||
|
|
||
| ### Exceptions | ||
|
|
||
| - `NoModificationAllowedError` {{domxref("DOMException")}} | ||
| - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Rotating an SVG Element | ||
|
|
||
| ```js | ||
| // Select an SVG element and create a transform object | ||
| const svgElement = document.querySelector("svg"); | ||
| const transform = svgElement.createSVGTransform(); | ||
|
|
||
| // Set a rotation of 45 degrees | ||
| transform.setRotate(45, 0, 0); | ||
|
|
||
| // Output the rotation angle | ||
| console.log(`Rotation Angle: ${transform.angle}`); // Output: 45 | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{domxref("SVGTransform.angle")}} |
Oops, something went wrong.