MDN Feature pages for SVGAnimatedNumber (mdn#37072)

* add: MDN Feature pages for SVGAnimatedNumber * simplified example and added consistent wording * rewrote for consistency * add: attribute examples * fix:example * add a svg path * Update files/en-us/web/api/svganimatednumber/animval/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update index.md * Update index.md * fix: animval * fix: baseval * Update files/en-us/web/api/svganimatednumber/animval/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/api/svganimatednumber/baseval/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/api/svganimatednumber/baseval/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/api/svganimatednumber/baseval/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/api/svganimatednumber/baseval/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/api/svganimatednumber/baseval/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/svganimatednumber/baseval/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
meonBot · Dec 15, 2024 · 5f0dba0 · 5f0dba0
1 parent 802978f
commit 5f0dba0
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 2 deletions.
diff --git a/files/en-us/web/api/svganimatednumber/animval/index.md b/files/en-us/web/api/svganimatednumber/animval/index.md
@@ -0,0 +1,53 @@
+---
+title: "SVGAnimatedNumber: animVal property"
+short-title: animVal
+slug: Web/API/SVGAnimatedNumber/animVal
+page-type: web-api-instance-property
+browser-compat: api.SVGAnimatedNumber.animVal
+---
+
+{{APIRef("SVG")}}
+
+The **`animVal`** read-only property of the {{domxref("SVGAnimatedNumber")}} interface represents the animated value of an SVG element's numeric attribute.
+
+Some animatable SVG attributes accept a single number, such as the {{SVGAttr("radius")}} attribute of the {{SVGElement("circle")}} or {{SVGElement("ellipse")}} elements and the {{SVGAttr("width")}} and {{SVGAttr("height")}} attributes of the {{SVGElement("rect")}} element, and many others. The `animVal` attribute provides access to the current animated value of the animatable numeric attribute during animations.
+
+## Value
+
+A `number`; the current value of the animated attribute as a float.
+
+## Examples
+
+This example includes a {{SVGElement("path")}} element with a nested {{SVGElement("animate")}} element that animates the value of the path's {{SVGElement("pathLength")}} attribute:
+
+```html
+<path d="M 0,40 h100" pathLength="90" id="path">
+  <animate
+    attributeName="pathLength"
+    values="50; 90; 50;"
+    dur="10s"
+    repeatCount="indefinite" />
+</path>
+```
+
+```js
+const path = document.querySelector("path");
+
+console.log(path.pathLength.animVal); // output: 50
+console.log(path.pathLength.baseVal); // output: 90
+```
+
+We use the `animVal` property to access the current value of the animating `pathLength`, while the {{domxref("SVGAnimatedNumber.baseVal")}} reflects the base (non-animating) value of the {{domxref("SVGGeometryElement.pathLength", "pathLength")}}.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedInteger")}}
+- {{domxref("SVGElement")}}
diff --git a/files/en-us/web/api/svganimatednumber/baseval/index.md b/files/en-us/web/api/svganimatednumber/baseval/index.md
@@ -0,0 +1,56 @@
+---
+title: "SVGAnimatedNumber: baseVal property"
+short-title: baseVal
+slug: Web/API/SVGAnimatedNumber/baseVal
+page-type: web-api-instance-property
+browser-compat: api.SVGAnimatedNumber.baseVal
+---
+
+{{APIRef("SVG")}}
+
+The **`baseVal`** property of the {{domxref("SVGAnimatedNumber")}} interface represents the base (non-animated) value of an animatable numeric attribute.
+
+Some animateable SVG attributes accept a single numeric value, such as the {{SVGAttr("radius")}} attribute of the {{SVGElement("circle")}} or {{SVGElement("ellipse")}} elements and the {{SVGAttr("width")}} and {{SVGAttr("height")}} attributes of the {{SVGElement("rect")}} element, and many others. The `baseVal` property reflects and updates the base, or non-animated, value of the numeric attribute.
+
+## Value
+
+A `number`; the base value of the attribute as a float.
+
+## Examples
+
+This example includes a {{SVGElement("path")}} element with a nested {{SVGElement("animate")}} element that animates the value of the path's {{SVGElement("pathLength")}} attribute:
+
+```html
+<path d="M 0,40 h100" pathLength="90" id="path">
+  <animate
+    attributeName="pathLength"
+    values="50; 90; 50;"
+    dur="10s"
+    repeatCount="indefinite" />
+</path>
+```
+
+```js
+const path = document.querySelector("path");
+
+console.log(path.pathLength.baseVal); // output: 90
+path.pathLength.baseVal = 50; // updates the value
+console.log(path.pathLength.baseVal); // output: 90
+```
+
+The `baseVal` reflect that value of the `pathLength` attribute. We also use the `baseVal` property to access the base (non-animating) value of the animating `pathLength`.
+
+To access the current value of the {{domxref("SVGGeometryElement.pathLength", "pathLength")}} value as it animates, use the {{domxref("SVGAnimatedNumber.animVal")}} property.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedInteger")}}
+- {{domxref("SVGElement")}}
diff --git a/files/en-us/web/api/svganimatednumber/index.md b/files/en-us/web/api/svganimatednumber/index.md
@@ -56,14 +56,14 @@ The `SVGAnimatedNumber` interface is used for attributes of basic type [\<Number
   </thead>
   <tbody>
     <tr>
-      <td><code>baseVal</code></td>
+      <td><code>{{domxref("SVGAnimatedNumber.baseVal")}}</code></td>
       <td>float</td>
       <td>
         The base value of the given attribute before applying any animations.
       </td>
     </tr>
     <tr>
-      <td><code>animVal</code></td>
+      <td><code>{{domxref("SVGAnimatedNumber.animVal")}}</code></td>
       <td>float</td>
       <td>
         If the given attribute or property is being animated, contains the