New Pages: SVGGraphicsElement

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
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
+  <!-- Circle transformed using translation -->
+  <circle
+    id="circle"
+    cx="50"
+    cy="50"
+    r="30"
+    fill="blue"
+    transform="translate(100, 150)" />
+</svg>
+```
+
+```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}}

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
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
+  <!-- Circle with translation and scale -->
+  <circle
+    id="circle"
+    cx="50"
+    cy="50"
+    r="30"
+    fill="blue"
+    transform="translate(100, 150) scale(2)" />
+</svg>
+```
+
+```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}}

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}}

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}}

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
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <!-- Rectangle with a transformation applied -->
+  <rect
+    id="rect1"
+    x="50"
+    y="50"
+    width="100"
+    height="100"
+    fill="blue"
+    transform="translate(20, 30) rotate(45)" />
+</svg>
+```
+
+```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}}