diff --git a/files/en-us/web/api/svgsvgelement/animationspaused/index.md b/files/en-us/web/api/svgsvgelement/animationspaused/index.md new file mode 100644 index 000000000000000..2f30549f8d3c563 --- /dev/null +++ b/files/en-us/web/api/svgsvgelement/animationspaused/index.md @@ -0,0 +1,81 @@ +--- +title: "SVGSVGElement: animationsPaused() method" +short-title: animationsPaused() +slug: Web/API/SVGSVGElement/animationsPaused +page-type: web-api-instance-method +browser-compat: api.SVGSVGElement.animationsPaused +--- + +{{APIRef("SVG")}} + +The `animationsPaused()` method of the {{domxref("SVGSVGElement")}} interface checks whether the animations in the SVG document fragment are currently paused. + +## Syntax + +```js-nolint +animationsPaused() +``` + +### Parameters + +None. + +### Return value + +A boolean. `true` if this SVG document fragment is in a paused state. + +## Examples + +### Checking if Animations are Paused + +```html + + + + + + + +

+```
+
+```js
+const svgElement = document.getElementById("exampleSVG");
+const pauseButton = document.getElementById("pauseBtn");
+const statusDisplay = document.getElementById("status");
+
+function updateStatus() {
+  const isPaused = svgElement.animationsPaused();
+  statusDisplay.textContent = `Animations paused: ${isPaused}`;
+}
+
+pauseButton.addEventListener("click", () => {
+  if (svgElement.animationsPaused()) {
+    svgElement.unpauseAnimations();
+  } else {
+    svgElement.pauseAnimations();
+  }
+  updateStatus();
+});
+
+// Initialize the status display
+updateStatus();
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.pauseAnimations()")}}
+- {{domxref("SVGSVGElement.unpauseAnimations()")}}
diff --git a/files/en-us/web/api/svgsvgelement/checkenclosure/index.md b/files/en-us/web/api/svgsvgelement/checkenclosure/index.md
new file mode 100644
index 000000000000000..a93f7f43aef6dea
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/checkenclosure/index.md
@@ -0,0 +1,80 @@
+---
+title: "SVGSVGElement: checkEnclosure() method"
+short-title: checkEnclosure()
+slug: Web/API/SVGSVGElement/checkEnclosure
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.checkEnclosure
+---
+
+{{APIRef("SVG")}}
+
+The `checkEnclosure()` method of the {{domxref("SVGSVGElement")}} interface checks if the rendered content of the given element is entirely contained within the supplied rectangle.
+
+Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in {{SVGAttr("pointer-events")}} processing.
+
+## Syntax
+
+```js-nolint
+checkEnclosure(element, rect)
+```
+
+### Parameters
+
+- `element`
+  - : An {{domxref("Element")}} representing the SVG graphics element to check.
+- `rect`
+  - : An {{domxref("SVGRect")}} object that defines the rectangle to check against.
+
+### Return value
+
+A boolean.
+
+## Examples
+
+### Checking if an Element is Enclosed in a Rectangle
+
+```html
+
+  
+  
+
+
+

+```
+
+```js
+const svgElement = document.getElementById("exampleSVG");
+const checkRect = svgElement.getElementById("checkRect");
+const targetElement = svgElement.getElementById("targetElement");
+const resultDisplay = document.getElementById("result");
+
+document.getElementById("checkEnclosureBtn").addEventListener("click", () => {
+  const rect = svgElement.createSVGRect();
+  rect.x = checkRect.x.baseVal.value;
+  rect.y = checkRect.y.baseVal.value;
+  rect.width = checkRect.width.baseVal.value;
+  rect.height = checkRect.height.baseVal.value;
+
+  const isEnclosed = svgElement.checkEnclosure(targetElement, rect);
+  resultDisplay.textContent = `Is the circle enclosed in the rectangle? ${isEnclosed}`;
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.checkIntersection()")}}
diff --git a/files/en-us/web/api/svgsvgelement/checkintersection/index.md b/files/en-us/web/api/svgsvgelement/checkintersection/index.md
new file mode 100644
index 000000000000000..187f1fa8c18e969
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/checkintersection/index.md
@@ -0,0 +1,82 @@
+---
+title: "SVGSVGElement: checkIntersection() method"
+short-title: checkIntersection()
+slug: Web/API/SVGSVGElement/checkIntersection
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.checkIntersection
+---
+
+{{APIRef("SVG")}}
+
+The `checkIntersection()` method of the {{domxref("SVGSVGElement")}} interface checks if the rendered content of the given element intersects the supplied rectangle.
+
+Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in {{SVGAttr("pointer-events")}} processing.
+
+## Syntax
+
+```js-nolint
+checkIntersection(element, rect)
+```
+
+### Parameters
+
+- `element`
+  - : An {{domxref("Element")}} representing the SVG graphics element to check.
+- `rect`
+  - : An {{domxref("SVGRect")}} object that defines the rectangle to check against.
+
+### Return value
+
+A boolean.
+
+## Examples
+
+### Checking if an Element Intersects a Rectangle
+
+```html
+
+  
+  
+
+
+

+```
+
+```js
+const svgElement = document.getElementById("exampleSVG");
+const checkRect = document.getElementById("checkRect");
+const targetElement = document.getElementById("targetElement");
+const resultDisplay = document.getElementById("result");
+
+document
+  .getElementById("checkIntersectionBtn")
+  .addEventListener("click", () => {
+    const rect = svgElement.createSVGRect();
+    rect.x = checkRect.x.baseVal.value;
+    rect.y = checkRect.y.baseVal.value;
+    rect.width = checkRect.width.baseVal.value;
+    rect.height = checkRect.height.baseVal.value;
+
+    const isIntersecting = svgElement.checkIntersection(targetElement, rect);
+    resultDisplay.textContent = `Does the circle intersect with the rectangle? ${isIntersecting}`;
+  });
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.checkEnclosure()")}}
diff --git a/files/en-us/web/api/svgsvgelement/createsvgangle/index.md b/files/en-us/web/api/svgsvgelement/createsvgangle/index.md
new file mode 100644
index 000000000000000..90d5b44d114935e
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/createsvgangle/index.md
@@ -0,0 +1,37 @@
+---
+title: "SVGSVGElement: createSVGAngle() method"
+short-title: createSVGAngle()
+slug: Web/API/SVGSVGElement/createSVGAngle
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGAngle
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGAngle()` method of the {{domxref("SVGSVGElement")}} interface creates an {{domxref("SVGAngle")}} object outside of any document trees.
+
+## Syntax
+
+```js-nolint
+createSVGAngle()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+An {{domxref("SVGAngle")}} object, initialized to a value of `0` (unitless).
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAngle")}}
diff --git a/files/en-us/web/api/svgsvgelement/createsvglength/index.md b/files/en-us/web/api/svgsvgelement/createsvglength/index.md
new file mode 100644
index 000000000000000..9ca7869705ff2c9
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/createsvglength/index.md
@@ -0,0 +1,37 @@
+---
+title: "SVGSVGElement: createSVGLength() method"
+short-title: createSVGLength()
+slug: Web/API/SVGSVGElement/createSVGLength
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGLength
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGLength()` method of the {{domxref("SVGSVGElement")}} interface creates an {{domxref("SVGLength")}} object outside of any document trees.
+
+## Syntax
+
+```js-nolint
+createSVGLength()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+An {{domxref("SVGLength")}} object, initialized to a value of `0` (unitless)..
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGLength")}}
diff --git a/files/en-us/web/api/svgsvgelement/createsvgmatrix/index.md b/files/en-us/web/api/svgsvgelement/createsvgmatrix/index.md
new file mode 100644
index 000000000000000..27adba280f2e09d
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/createsvgmatrix/index.md
@@ -0,0 +1,37 @@
+---
+title: "SVGSVGElement: createSVGMatrix() method"
+short-title: createSVGMatrix()
+slug: Web/API/SVGSVGElement/createSVGMatrix
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGMatrix
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGMatrix()` method of the {{domxref("SVGSVGElement")}} interface creates a {{domxref("DOMMatrix")}} object outside of any document trees.
+
+## Syntax
+
+```js-nolint
+createSVGMatrix()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A {{domxref("DOMMatrix")}} object, initialized to the identity matrix.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrix", "SVGMatrix")}}
diff --git a/files/en-us/web/api/svgsvgelement/createsvgnumber/index.md b/files/en-us/web/api/svgsvgelement/createsvgnumber/index.md
new file mode 100644
index 000000000000000..9589e0c9d010e21
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/createsvgnumber/index.md
@@ -0,0 +1,37 @@
+---
+title: "SVGSVGElement: createSVGNumber() method"
+short-title: createSVGNumber()
+slug: Web/API/SVGSVGElement/createSVGNumber
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGNumber
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGNumber()` method of the {{domxref("SVGSVGElement")}} interface creates an {{domxref("SVGNumber")}} object outside of any document trees.
+
+## Syntax
+
+```js-nolint
+createSVGNumber()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+An {{domxref("SVGNumber")}} object, initialized to `0`.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGNumber")}}
diff --git a/files/en-us/web/api/svgsvgelement/createsvgpoint/index.md b/files/en-us/web/api/svgsvgelement/createsvgpoint/index.md
new file mode 100644
index 000000000000000..d0caa778e343998
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/createsvgpoint/index.md
@@ -0,0 +1,37 @@
+---
+title: "SVGSVGElement: createSVGPoint() method"
+short-title: createSVGPoint()
+slug: Web/API/SVGSVGElement/createSVGPoint
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGPoint
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGPoint()` method of the {{domxref("SVGSVGElement")}} interface creates an {{domxref("SVGPoint")}} object outside of any document trees.
+
+## Syntax
+
+```js-nolint
+createSVGPoint()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+An {{domxref("SVGPoint")}} object, initialized to the point `(0,0)` in the user coordinate system.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGPoint")}}
diff --git a/files/en-us/web/api/svgsvgelement/createsvgrect/index.md b/files/en-us/web/api/svgsvgelement/createsvgrect/index.md
new file mode 100644
index 000000000000000..df044d4ead243ae
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/createsvgrect/index.md
@@ -0,0 +1,37 @@
+---
+title: "SVGSVGElement: createSVGRect() method"
+short-title: createSVGRect()
+slug: Web/API/SVGSVGElement/createSVGRect
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGRect
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGRect()` method of the {{domxref("SVGSVGElement")}} interface creates an {{domxref("DOMRect")}} object outside of any document trees.
+
+## Syntax
+
+```js-nolint
+createSVGRect()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A {{domxref("DOMRect")}} object, initialized with `x`, `y`, `width`, and `height` all set to `0`.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMRect")}}
diff --git a/files/en-us/web/api/svgsvgelement/createsvgtransform/index.md b/files/en-us/web/api/svgsvgelement/createsvgtransform/index.md
new file mode 100644
index 000000000000000..e754320d48556d8
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/createsvgtransform/index.md
@@ -0,0 +1,37 @@
+---
+title: "SVGSVGElement: createSVGTransform() method"
+short-title: createSVGTransform()
+slug: Web/API/SVGSVGElement/createSVGTransform
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGTransform
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGTransform()` method of the {{domxref("SVGSVGElement")}} interface creates an {{domxref("SVGTransform")}} object outside of any document trees.
+
+## Syntax
+
+```js-nolint
+createSVGTransform()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+An {{domxref("SVGTransform")}} object, initialized to the identity matrix transform (`matrix(1, 0, 0, 1, 0, 0)`).
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGTransform")}}
diff --git a/files/en-us/web/api/svgsvgelement/createsvgtransformfrommatrix/index.md b/files/en-us/web/api/svgsvgelement/createsvgtransformfrommatrix/index.md
new file mode 100644
index 000000000000000..af65deabce701e5
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/createsvgtransformfrommatrix/index.md
@@ -0,0 +1,67 @@
+---
+title: "SVGSVGElement: createSVGTransformFromMatrix() method"
+short-title: createSVGTransformFromMatrix()
+slug: Web/API/SVGSVGElement/createSVGTransformFromMatrix
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGTransformFromMatrix
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGTransformFromMatrix()` method of the {{domxref("SVGSVGElement")}} interface creates an {{domxref("SVGTransform")}} object outside of any document trees, based on the given {{domxref("DOMMatrix")}} object.
+
+## Syntax
+
+```js-nolint
+createSVGTransformFromMatrix(matrix)
+```
+
+### Parameters
+
+- `matrix`
+  - : A {{domxref("DOMMatrix")}} object representing the initial matrix for the transform.
+
+### Return value
+
+An {{domxref("SVGTransform")}} object, initialized to the given matrix transform. It is a `matrix()` transform if the `matrix` is [2D](/en-US/docs/Web/API/DOMMatrixReadOnly/is2D), and a `matrix3d()` transform otherwise.
+
+## Examples
+
+### Creating a Transform from a Matrix
+
+```html
+
+  
+
+```
+
+```js
+const svgElement = document.getElementById("exampleSVG");
+const rectElement = document.getElementById("exampleRect");
+
+// Create a new matrix
+const matrix = svgElement.createSVGMatrix();
+matrix.a = 1; // Scale x
+matrix.d = 1; // Scale y
+matrix.e = 50; // Translate x
+matrix.f = 50; // Translate y
+
+// Create a new SVGTransform from the matrix
+const transform = svgElement.createSVGTransformFromMatrix(matrix);
+
+// Apply the transform to the rectangle
+rectElement.transform.baseVal.appendItem(transform);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGTransform")}}
+- {{domxref("DOMMatrix")}}
diff --git a/files/en-us/web/api/svgsvgelement/currentscale/index.md b/files/en-us/web/api/svgsvgelement/currentscale/index.md
new file mode 100644
index 000000000000000..0b7f100cedd4303
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/currentscale/index.md
@@ -0,0 +1,31 @@
+---
+title: "SVGSVGElement: currentScale property"
+short-title: currentScale
+slug: Web/API/SVGSVGElement/currentScale
+page-type: web-api-instance-property
+browser-compat: api.SVGSVGElement.currentScale
+---
+
+{{APIRef("SVG")}}
+
+The **`currentScale`** property of the {{domxref("SVGSVGElement")}} interface reflects the current scale factor relative to the initial view to take into account user magnification and panning operations on the outermost {{SVGElement("svg")}} element.
+
+DOM attributes `currentScale` and `currentTranslate` are equivalent to the 2×3 matrix `[a b c d e f] = [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]`. If "magnification" is enabled (i.e., `zoomAndPan="magnify"`), then the effect is as if an extra transformation were placed at the outermost level on the SVG document fragment (i.e., outside the outermost {{SVGElement("svg")}} element).
+
+If the {{SVGElement("svg")}} element is not at the outermost level, then `currentScale` is always `1` and setting it has no effect.
+
+## Value
+
+A float.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.currentTranslate")}}
diff --git a/files/en-us/web/api/svgsvgelement/currenttranslate/index.md b/files/en-us/web/api/svgsvgelement/currenttranslate/index.md
new file mode 100644
index 000000000000000..e8e076e19af6401
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/currenttranslate/index.md
@@ -0,0 +1,30 @@
+---
+title: "SVGSVGElement: currentTranslate property"
+short-title: currentTranslate
+slug: Web/API/SVGSVGElement/currentTranslate
+page-type: web-api-instance-property
+browser-compat: api.SVGSVGElement.currentTranslate
+---
+
+{{APIRef("SVG")}}
+
+The **`currentTranslate`** read-only property of the {{domxref("SVGSVGElement")}} interface reflects the translation factor that takes into account user "magnification" corresponding to an outermost {{SVGElement("svg")}} element.
+
+If the {{SVGElement("svg")}} element is not at the outermost level, then `currentTranslate` is always `{ x: 0, y: 0 }` and is read-only. Otherwise, it is writable.
+
+## Value
+
+A {{domxref("DOMPointReadOnly")}}.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.currentScale")}}
+- {{domxref("DOMPointReadOnly")}}
diff --git a/files/en-us/web/api/svgsvgelement/deselectall/index.md b/files/en-us/web/api/svgsvgelement/deselectall/index.md
new file mode 100644
index 000000000000000..56d32ab2121d311
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/deselectall/index.md
@@ -0,0 +1,33 @@
+---
+title: "SVGSVGElement: deselectAll() method"
+short-title: deselectAll()
+slug: Web/API/SVGSVGElement/deselectAll
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.deselectAll
+---
+
+{{APIRef("SVG")}}
+
+The `deselectAll()` method of the {{domxref("SVGSVGElement")}} interface unselects any selected objects, including any selections of text strings and type-in bars.
+
+## Syntax
+
+```js-nolint
+deselectAll()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+None.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/svgsvgelement/getcurrenttime/index.md b/files/en-us/web/api/svgsvgelement/getcurrenttime/index.md
new file mode 100644
index 000000000000000..039428fc78e8cce
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/getcurrenttime/index.md
@@ -0,0 +1,62 @@
+---
+title: "SVGSVGElement: getCurrentTime() method"
+short-title: getCurrentTime()
+slug: Web/API/SVGSVGElement/getCurrentTime
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.getCurrentTime
+---
+
+{{APIRef("SVG")}}
+
+The `getCurrentTime()` method of the {{domxref("SVGSVGElement")}} interface returns the current time in seconds relative to the start time for the current SVG document fragment.
+
+If `getCurrentTime()` is called before the document timeline has begun (for example, by script running in a {{SVGElement("script")}} element before the document's `SVGLoad` event is dispatched), then `0` is returned.
+
+## Syntax
+
+```js-nolint
+getCurrentTime()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A float.
+
+## Examples
+
+### Getting the Current Time
+
+```html
+
+  
+
+
+

+``` + +```js +const svgElement = document.getElementById("exampleSVG"); +const getTimeButton = document.getElementById("getTimeButton"); +const currentTimeDisplay = document.getElementById("currentTimeDisplay"); + +getTimeButton.addEventListener("click", () => { + const currentTime = svgElement.getCurrentTime(); + currentTimeDisplay.textContent = `Current time in the SVG: ${currentTime} seconds`; +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgsvgelement/getelementbyid/index.md b/files/en-us/web/api/svgsvgelement/getelementbyid/index.md new file mode 100644 index 000000000000000..3afcb5b2276cda7 --- /dev/null +++ b/files/en-us/web/api/svgsvgelement/getelementbyid/index.md @@ -0,0 +1,65 @@ +--- +title: "SVGSVGElement: getElementById() method" +short-title: getElementById() +slug: Web/API/SVGSVGElement/getElementById +page-type: web-api-instance-method +browser-compat: api.SVGSVGElement.getElementById +--- + +{{APIRef("SVG")}} + +The `getElementById()` method of the {{domxref("SVGSVGElement")}} interface searches the SVG document fragment (i.e., the search is restricted to a subset of the document tree) for an {{domxref("Element")}} whose `id` property matches the specified string. + +## Syntax + +```js-nolint +getElementById(id) +``` + +### Parameters + +- `id` + - : The ID of the element to locate. The ID is a case-sensitive string which is unique within the SVG document fragment; only one element should have any given ID. + +### Return value + +An {{domxref("Element")}} object describing the DOM element object matching the specified ID, or `null` if no matching element was found in the SVG document fragment. + +## Examples + +### Retrieving an Element by ID + +```html + + + + +

+``` + +```js +const svgElement = document.getElementById("exampleSVG"); +const getElementButton = document.getElementById("getElementButton"); +const elementDisplay = document.getElementById("elementDisplay"); + +getElementButton.addEventListener("click", () => { + const circleElement = svgElement.getElementById("circle1"); + if (circleElement) { + elementDisplay.textContent = "Element found: " + circleElement.tagName; + } else { + elementDisplay.textContent = "Element not found."; + } +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgsvgelement/index.md b/files/en-us/web/api/svgsvgelement/index.md index a2d83969db68781..4799f8a248faf26 100644 --- a/files/en-us/web/api/svgsvgelement/index.md +++ b/files/en-us/web/api/svgsvgelement/index.md @@ -23,6 +23,10 @@ _This interface also inherits properties from its parent, {{domxref("SVGGraphics - : An {{domxref("SVGAnimatedLength")}} corresponding to the {{SVGAttr("width")}} attribute of the given {{SVGElement("svg")}} element. - {{domxref("SVGSVGElement.height")}} {{ReadOnlyInline}} - : An {{domxref("SVGAnimatedLength")}} corresponding to the {{SVGAttr("height")}} attribute of the given {{SVGElement("svg")}} element. +- {{domxref("SVGSVGElement.viewBox")}} {{ReadOnlyInline}} + - : An {{domxref("SVGAnimatedRect")}} corresponding to the {{SVGAttr("viewBox")}} attribute of the given {{SVGElement("svg")}} element. +- {{domxref("SVGSVGElement.preserveAspectRatio")}} {{ReadOnlyInline}} + - : An {{domxref("SVGAnimatedPreserveAspectRatio")}} corresponding to the {{SVGAttr("preserveAspectRatio")}} attribute of the given {{SVGElement("svg")}} element. - {{domxref("SVGSVGElement.pixelUnitToMillimeterX")}} {{Deprecated_Inline}} - : A float representing the size of the pixel unit (as defined by CSS2) along the x-axis of the viewport, which represents a unit somewhere in the range of 70dpi to 120dpi, and, on systems that support this, might actually match the characteristics of the target medium. On systems where it is impossible to know the size of a pixel, a suitable default pixel size is provided. - {{domxref("SVGSVGElement.pixelUnitToMillimeterY")}} {{Deprecated_Inline}} @@ -32,7 +36,7 @@ _This interface also inherits properties from its parent, {{domxref("SVGGraphics - {{domxref("SVGSVGElement.screenPixelToMillimeterY")}} {{Deprecated_Inline}} - : Corresponding size of a screen pixel along the y-axis of the viewport. - {{domxref("SVGSVGElement.useCurrentView")}} {{Deprecated_Inline}} {{Non-standard_Inline}} - - : The initial view (i.e., before magnification and panning) of the current innermost SVG document fragment can be either the "standard" view, i.e., based on attributes on the {{SVGElement("svg")}} element such as {{SVGAttr("viewBox")}}) or on a "custom" view (i.e., a hyperlink into a particular {{SVGElement("view")}} or other element). If the initial view is the "standard" view, then this attribute is `false`. If the initial view is a "custom" view, then this attribute is `true`. + - : The initial view (i.e., before magnification and panning) of the current innermost SVG document fragment can be either the "standard" view, i.e., based on attributes on the {{SVGElement("svg")}} element such as {{SVGAttr("viewBox")}} or on a "custom" view (i.e., a hyperlink into a particular {{SVGElement("view")}} or other element). If the initial view is the "standard" view, then this attribute is `false`. If the initial view is a "custom" view, then this attribute is `true`. - {{domxref("SVGSVGElement.currentView")}} {{Deprecated_Inline}} {{Non-standard_Inline}} - : An {{domxref("SVGViewSpec")}} defining the initial view (i.e., before magnification and panning) of the current innermost SVG document fragment. The meaning depends on the situation: If the initial view was a "standard" view, then: @@ -120,7 +124,7 @@ _This interface also inherits methods from its parent, {{domxref("SVGGraphicsEle - {{domxref("SVGSVGElement.createSVGPoint()")}} - : Creates an {{domxref("SVGPoint")}} object outside of any document trees. The object is initialized to the point `(0,0)` in the user coordinate system. - {{domxref("SVGSVGElement.createSVGMatrix()")}} - - : Creates an {{domxref("DOMMatrix", "SVGMatrix")}} object outside of any document trees. The object is initialized to the identity matrix. + - : Creates a {{domxref("DOMMatrix")}} object outside of any document trees. The object is initialized to the identity matrix. - {{domxref("SVGSVGElement.createSVGRect()")}} - : Creates an {{domxref("SVGRect")}} object outside of any document trees. The object is initialized such that all values are set to `0` user units. - {{domxref("SVGSVGElement.createSVGTransform()")}} diff --git a/files/en-us/web/api/svgsvgelement/pauseanimations/index.md b/files/en-us/web/api/svgsvgelement/pauseanimations/index.md new file mode 100644 index 000000000000000..8c3eb464f23f58c --- /dev/null +++ b/files/en-us/web/api/svgsvgelement/pauseanimations/index.md @@ -0,0 +1,68 @@ +--- +title: "SVGSVGElement: pauseAnimations() method" +short-title: pauseAnimations() +slug: Web/API/SVGSVGElement/pauseAnimations +page-type: web-api-instance-method +browser-compat: api.SVGSVGElement.pauseAnimations +--- + +{{APIRef("SVG")}} + +The `pauseAnimations()` method of the {{domxref("SVGSVGElement")}} interface suspends (i.e., pauses) all currently running animations that are defined within the SVG document fragment corresponding to this {{SVGElement("svg")}} element, causing the animation clock corresponding to this document fragment to stand still until it is unpaused. + +## Syntax + +```js-nolint +pauseAnimations() +``` + +### Parameters + +None. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +### Pausing Animations + +```html + + + + + + + +

+```
+
+```js
+const svgElement = document.getElementById("exampleSVG");
+const pauseButton = document.getElementById("pauseBtn");
+const statusDisplay = document.getElementById("status");
+
+pauseButton.addEventListener("click", () => {
+  svgElement.pauseAnimations();
+  statusDisplay.textContent = "Animations paused.";
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.unpauseAnimations()")}}
diff --git a/files/en-us/web/api/svgsvgelement/preserveaspectratio/index.md b/files/en-us/web/api/svgsvgelement/preserveaspectratio/index.md
new file mode 100644
index 000000000000000..9ff4ea6c7428d48
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/preserveaspectratio/index.md
@@ -0,0 +1,48 @@
+---
+title: "SVGSVGElement: preserveAspectRatio property"
+short-title: preserveAspectRatio
+slug: Web/API/SVGSVGElement/preserveAspectRatio
+page-type: web-api-instance-property
+browser-compat: api.SVGSVGElement.preserveAspectRatio
+---
+
+{{APIRef("SVG")}}
+
+The **`preserveAspectRatio`** read-only property of the {{domxref("SVGSVGElement")}} interface reflects the {{SVGAttr("preserveAspectRatio")}} attribute of the given element. It defines how the SVG element's content should be scaled to fit the given space, preserving its aspect ratio.
+
+## Value
+
+An {{domxref("SVGAnimatedPreserveAspectRatio")}} object.
+
+## Example
+
+Given the following SVG, we can use the `preserveAspectRatio` property to retrieve the scaling behavior for the SVG element:
+
+```html
+
+  
+
+```
+
+We can access the `preserveAspectRatio` attribute:
+
+```js
+const svgElement = document.querySelector("svg");
+
+console.log(svgElement.preserveAspectRatio.baseVal); // output: SVGPreserveAspectRatio {align: 1, meetOrSlice: 1}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{SVGAttr("preserveAspectRatio")}}
diff --git a/files/en-us/web/api/svgsvgelement/setcurrenttime/index.md b/files/en-us/web/api/svgsvgelement/setcurrenttime/index.md
new file mode 100644
index 000000000000000..75aacf98460d1ff
--- /dev/null
+++ b/files/en-us/web/api/svgsvgelement/setcurrenttime/index.md
@@ -0,0 +1,65 @@
+---
+title: "SVGSVGElement: setCurrentTime() method"
+short-title: setCurrentTime()
+slug: Web/API/SVGSVGElement/setCurrentTime
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.setCurrentTime
+---
+
+{{APIRef("SVG")}}
+
+The `setCurrentTime()` method of the {{domxref("SVGSVGElement")}} interface adjusts the clock for this SVG document fragment, establishing a new current time.
+
+If `setCurrentTime()` is called before the document timeline has begun (for example, by script running in a {{SVGElement("script")}} element before the document's `SVGLoad` event is dispatched), then the value of seconds in the last invocation of the method gives the time that the document will seek to once the document timeline has begun.
+
+## Syntax
+
+```js-nolint
+setCurrentTime(time)
+```
+
+### Parameters
+
+- `time`
+  - : A float representing the time in seconds to set the current time.
+
+### Return value
+
+None.
+
+## Examples
+
+### Setting the Current Time
+
+```html
+
+  
+
+
+

+``` + +```js +const svgElement = document.getElementById("exampleSVG"); +const setTimeButton = document.getElementById("setTimeButton"); +const currentTimeDisplay = document.getElementById("currentTimeDisplay"); + +setTimeButton.addEventListener("click", () => { + // Setting the time to 5 seconds + svgElement.setCurrentTime(5); + const currentTime = svgElement.getCurrentTime(); + currentTimeDisplay.textContent = `Current time in the SVG: ${currentTime} seconds`; +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgsvgelement/unpauseanimations/index.md b/files/en-us/web/api/svgsvgelement/unpauseanimations/index.md new file mode 100644 index 000000000000000..9d2289ece8e0a28 --- /dev/null +++ b/files/en-us/web/api/svgsvgelement/unpauseanimations/index.md @@ -0,0 +1,75 @@ +--- +title: "SVGSVGElement: unpauseAnimations() method" +short-title: unpauseAnimations() +slug: Web/API/SVGSVGElement/unpauseAnimations +page-type: web-api-instance-method +browser-compat: api.SVGSVGElement.unpauseAnimations +--- + +{{APIRef("SVG")}} + +The `unpauseAnimations()` method of the {{domxref("SVGSVGElement")}} interface resumes (i.e., unpauses) currently running animations that are defined within the SVG document fragment, causing the animation clock to continue from the time at which it was suspended. + +## Syntax + +```js-nolint +unpauseAnimations() +``` + +### Parameters + +None. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +### Unpausing Animations + +```html + + + + + + + + +

+```
+
+```js
+const svgElement = document.getElementById("exampleSVG");
+const pauseButton = document.getElementById("pauseBtn");
+const resumeButton = document.getElementById("resumeBtn");
+const statusDisplay = document.getElementById("status");
+
+pauseButton.addEventListener("click", () => {
+  svgElement.pauseAnimations();
+  statusDisplay.textContent = "Animations paused.";
+});
+
+resumeButton.addEventListener("click", () => {
+  svgElement.unpauseAnimations();
+  statusDisplay.textContent = "Animations resumed.";
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.pauseAnimations()")}}