diff --git a/files/en-us/web/api/svggraphicselement/getctm/index.md b/files/en-us/web/api/svggraphicselement/getctm/index.md new file mode 100644 index 000000000000000..74f96cf0f0000eb --- /dev/null +++ b/files/en-us/web/api/svggraphicselement/getctm/index.md @@ -0,0 +1,63 @@ +--- +title: "SVGGraphicsElement: getCTM() method" +short-title: getCTM() +slug: Web/API/SVGGraphicsElement/getCTM +page-type: web-api-instance-method +browser-compat: api.SVGGraphicsElement.getCTM +--- + +{{APIRef("SVG")}} + +The `getCTM()` method of the {{domxref("SVGGraphicsElement")}} interface represents the matrix that transforms the current element's coordinate system to its SVG viewport's coordinate system. + +## Syntax + +```js-nolint +getCTM() +``` + +### Parameters + +None. + +### Return value + +A {{domxref("DOMMatrix")}} object. + +## Examples + +### Getting the Transformation Matrix + +```html + + + + +``` + +```js +const circle = document.getElementById("circle"); + +// Get the current transformation matrix +const ctm = circle.getCTM(); + +console.log("Matrix values:"); +console.log( + `a: ${ctm.a}, b: ${ctm.b}, c: ${ctm.c}, d: ${ctm.d}, e: ${ctm.e}, f: ${ctm.f}`, +); +// Output: Matrix values: a: 1, b: 0, c: 0, d: 1, e: 100, f: 150 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svggraphicselement/getscreenctm/index.md b/files/en-us/web/api/svggraphicselement/getscreenctm/index.md new file mode 100644 index 000000000000000..91c331cf4326755 --- /dev/null +++ b/files/en-us/web/api/svggraphicselement/getscreenctm/index.md @@ -0,0 +1,63 @@ +--- +title: "SVGGraphicsElement: getScreenCTM() method" +short-title: getScreenCTM() +slug: Web/API/SVGGraphicsElement/getScreenCTM +page-type: web-api-instance-method +browser-compat: api.SVGGraphicsElement.getScreenCTM +--- + +{{APIRef("SVG")}} + +The `getScreenCTM()` method of the {{domxref("SVGGraphicsElement")}} interface represents the matrix that transforms the current element's coordinate system to the coordinate system of the SVG viewport for the SVG document fragment. + +## Syntax + +```js-nolint +getScreenCTM() +``` + +### Parameters + +None. + +### Return value + +A {{domxref("DOMMatrix")}} object. + +## Examples + +### Getting the Screen Transformation Matrix + +```html + + + + +``` + +```js +const circle = document.getElementById("circle"); + +// Get the current screen transformation matrix +const screenCTM = circle.getScreenCTM(); + +console.log("Screen transformation matrix:"); +console.log( + `a: ${screenCTM.a}, b: ${screenCTM.b}, c: ${screenCTM.c}, d: ${screenCTM.d}, e: ${screenCTM.e}, f: ${screenCTM.f}`, +); +// Output: a: 2, b: 0, c: 0, d: 2, e: 100, f: 150 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svggraphicselement/requiredextensions/index.md b/files/en-us/web/api/svggraphicselement/requiredextensions/index.md new file mode 100644 index 000000000000000..2c62080ed632bc5 --- /dev/null +++ b/files/en-us/web/api/svggraphicselement/requiredextensions/index.md @@ -0,0 +1,23 @@ +--- +title: "SVGGraphicsElement: requiredExtensions property" +short-title: requiredExtensions +slug: Web/API/SVGGraphicsElement/requiredExtensions +page-type: web-api-instance-property +browser-compat: api.SVGGraphicsElement.requiredExtensions +--- + +{{APIRef("SVG")}} + +The **`requiredExtensions`** read-only property of the {{domxref("SVGGraphicsElement")}} interface reflects the {{SVGAttr("requiredExtensions")}} attribute of the given element. + +## Value + +An {{domxref("SVGStringList")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svggraphicselement/systemlanguage/index.md b/files/en-us/web/api/svggraphicselement/systemlanguage/index.md new file mode 100644 index 000000000000000..e8dcb7e2dc3817a --- /dev/null +++ b/files/en-us/web/api/svggraphicselement/systemlanguage/index.md @@ -0,0 +1,23 @@ +--- +title: "SVGGraphicsElement: systemLanguage property" +short-title: systemLanguage +slug: Web/API/SVGGraphicsElement/systemLanguage +page-type: web-api-instance-property +browser-compat: api.SVGGraphicsElement.systemLanguage +--- + +{{APIRef("SVG")}} + +The **`systemLanguage`** read-only property of the {{domxref("SVGGraphicsElement")}} interface reflects the {{SVGAttr("systemLanguage")}} attribute of the given element. + +## Value + +An {{domxref("SVGStringList")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svggraphicselement/transform/index.md b/files/en-us/web/api/svggraphicselement/transform/index.md new file mode 100644 index 000000000000000..c91eb89d9b5fd13 --- /dev/null +++ b/files/en-us/web/api/svggraphicselement/transform/index.md @@ -0,0 +1,58 @@ +--- +title: "SVGGraphicsElement: transform property" +short-title: transform +slug: Web/API/SVGGraphicsElement/transform +page-type: web-api-instance-property +browser-compat: api.SVGGraphicsElement.transform +--- + +{{APIRef("SVG")}} + +The **`transform`** read-only property of the {{domxref("SVGGraphicsElement")}} interface reflects the computed value of the transform property and its corresponding {{SVGAttr("transform")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedTransformList")}} object. + +## Examples + +### Accessing the `transform` Property + +```html + + + + +``` + +```js +// Access the SVG element +const rect = document.getElementById("rect1"); + +// Get the transform list +const transformList = rect.transform.baseVal; + +// Iterate through and log each transformation +for (let i = 0; i < transformList.numberOfItems; i++) { + const transform = transformList.getItem(i); + console.log(`Type: ${transform.type}, Matrix: ${transform.matrix}`); +} +// Example output: +// Type: 2 (SVG_TRANSFORM_TRANSLATE), Matrix: SVGMatrix { ... } +// Type: 4 (SVG_TRANSFORM_ROTATE), Matrix: SVGMatrix { ... } +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}}