add: instance methods SVGAnimationElement (#37180)

* add: instance methods SVGAnimationElement

* fix: none parameters undefined

* add: getcurrenttime reflects dur attr

* add: getcurrenttime explanation and fix dur attr of getsimpleduration

* explained simple duration

* simple duration condition for exception

* fix examples

* add: exception cases for getstarttime

files/en-us/web/api/svganimationelement/getcurrenttime/index.md

@@ -0,0 +1,67 @@
+---
+title: "SVGAnimationElement: getCurrentTime() method"
+short-title: getCurrentTime()
+slug: Web/API/SVGAnimationElement/getCurrentTime
+page-type: web-api-instance-method
+browser-compat: api.SVGAnimationElement.getCurrentTime
+---
+
+{{APIRef("SVG")}}
+
+The {{domxref("SVGAnimationElement")}} method `getCurrentTime()` returns a float representing the current time in seconds relative to time zero for the given time container.
+
+Time zero refers to the moment when the time container begins its timeline. It acts as the starting reference point for all animations within that container.
+
+A time container is an element or context that defines a local timeline for one or more animations. Animations inside the time container are measured relative to its timeline. If a time container is delayed, paused, or manipulated, all animations within it adjust accordingly.
+
+## Syntax
+
+```js-nolint
+getCurrentTime()
+```
+
+### Parameters
+
+None ({{jsxref('undefined')}}).
+
+### Return value
+
+A float.
+
+## Examples
+
+This example demonstrates how the `getCurrentTime()` method retrieves the time elapsed since the time container's time zero.
+
+```html
+<svg width="200" height="200" viewBox="0 0 200 200">
+  <circle cx="50" cy="50" r="20" fill="rebeccapurple">
+    <animate
+      attributeName="cx"
+      from="50"
+      to="150"
+      dur="4s"
+      repeatCount="indefinite" />
+  </circle>
+</svg>
+```
+
+```js
+const animationElement = document.querySelector("animate");
+
+setInterval(() => {
+  const currentTime = animationElement.getCurrentTime();
+  console.log(
+    `Current time relative to the time container: ${currentTime} seconds`,
+  );
+}, 1000);
+```
+
+The animation starts at `time zero = 0` and runs indefinitely, and the `getCurrentTime()` value increments continuously within the context of the time container.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/svganimationelement/getsimpleduration/index.md

@@ -0,0 +1,68 @@
+---
+title: "SVGAnimationElement: getSimpleDuration() method"
+short-title: getSimpleDuration()
+slug: Web/API/SVGAnimationElement/getSimpleDuration
+page-type: web-api-instance-method
+browser-compat: api.SVGAnimationElement.getSimpleDuration
+---
+
+{{APIRef("SVG")}}
+
+The {{domxref("SVGAnimationElement")}} method `getSimpleDuration()` returns a float representing the number of seconds for the simple duration for this animation.
+
+Simple duration refers to the length of time an animation is supposed to run for a single iteration, without considering repeats, restarts, or extensions.
+
+This property reflects the {{SVGAttr("dur")}} attribute of the {{SVGElement("animate")}}, {{SVGElement("animateMotion")}} or {{SVGElement("animateTransform")}} element.
+
+## Syntax
+
+```js-nolint
+getSimpleDuration()
+```
+
+### Parameters
+
+None ({{jsxref('undefined')}}).
+
+### Return value
+
+A float.
+
+### Exceptions
+
+- `NotSupportedError` {{domxref("DOMException")}}
+  - : Thrown if the `SVGAnimationElement`'s simple duration is undefined (e.g., the end time is indefinite). This happens when the {{SVGAttr("dur")}} attribute is set to `indefinite` or is undefined, as then the simple duration is considered undefined.
+
+## Examples
+
+This example demonstrates how the `dur="3s"` attribute defines a simple duration of 3 seconds.
+
+```html
+<svg width="200" height="200" viewBox="0 0 200 200">
+  <circle cx="50" cy="50" r="20" fill="rebeccapurple">
+    <animate
+      attributeName="cx"
+      from="50"
+      to="150"
+      dur="3s"
+      repeatCount="indefinite" />
+  </circle>
+</svg>
+```
+
+```js
+const animationElement = document.querySelector("animate");
+
+const simpleDuration = animationElement.getSimpleDuration();
+console.log(`The simple duration is: ${simpleDuration} seconds`); // Output: 3
+```
+
+Since `repeatCount="indefinite"` specifies continuous looping, the effective duration is infinite, but the simple duration remains 3 seconds per iteration.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/svganimationelement/getstarttime/index.md

@@ -0,0 +1,69 @@
+---
+title: "SVGAnimationElement: getStartTime() method"
+short-title: getStartTime()
+slug: Web/API/SVGAnimationElement/getStartTime
+page-type: web-api-instance-method
+browser-compat: api.SVGAnimationElement.getStartTime
+---
+
+{{APIRef("SVG")}}
+
+The {{domxref("SVGAnimationElement")}} method `getStartTime()` returns a float representing the start time, in seconds, for this animation element's current interval, if it exists, regardless of whether the interval has begun yet.
+
+The start time returned by `getStartTime()` is measured in seconds relative to the time container's time zero.
+
+Time zero refers to the moment when the time container begins its timeline. It acts as the starting reference point for all animations within that container.
+
+A time container is an element or context that defines a local timeline for one or more animations. Animations inside the time container are measured relative to its timeline. If a time container is delayed, paused, or manipulated, all animations within it adjust accordingly.
+
+This property reflects the {{SVGAttr("begin")}} attribute of the {{SVGElement("animate")}}, {{SVGElement("animateMotion")}} or {{SVGElement("animateTransform")}} element.
+
+## Syntax
+
+```js-nolint
+getStartTime()
+```
+
+### Parameters
+
+None ({{jsxref('undefined')}}).
+
+### Return value
+
+A float.
+
+### Exceptions
+
+- `InvalidStateError` {{domxref("DOMException")}}
+  - : Thrown if the `SVGAnimationElement` has no current interval. This happens when the animation element's {{SVGAttr("begin")}} time has not been reached or defined, thus the `getStartTime()` method cannot determine a valid start time. An example can be when the animation is set to start at `begin="click"`, but the user has not yet clicked to trigger it.
+
+## Examples
+
+This example demonstrates how `begin="3s"` attribute makes the animation start 3 seconds after the time container's timeline begins.
+
+```html
+<svg width="200" height="200" viewBox="0 0 200 200">
+  <circle cx="50" cy="50" r="20" fill="rebeccapurple">
+    <animate attributeName="cx" from="50" to="150" dur="5s" begin="3s" />
+  </circle>
+</svg>
+```
+
+```js
+const animationElement = document.querySelector("animate");
+
+const startTime = animationElement.getStartTime();
+console.log(
+  `The animation starts at: ${startTime} seconds relative to the time container's timeline`,
+); // Output: 3
+```
+
+The `getStartTime()` method returns `3.0` because that is the time relative to the time container's time zero.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}