MDN Feature Pages for SVGAnimatedRect: animVal, baseVal

files/en-us/web/api/svganimatedrect/animval/index.md

@@ -0,0 +1,50 @@
+---
+title: "SVGAnimatedRect: animVal property"
+short-title: animVal
+slug: Web/API/SVGAnimatedRect/animVal
+page-type: web-api-instance-property
+browser-compat: api.SVGAnimatedRect.animVal
+---
+
+{{APIRef("SVG")}}
+
+The **`SVGAnimatedRect.animVal`** read-only property of the {{domxref("SVGAnimatedRect")}} interface represents the current animated value of the `viewBox` attribute. If the attribute is being animated, `animVal` reflects the current state of the animation. If no animation is applied, `animVal` will be identical to `baseVal`.
+
+## Value
+
+A {{domxref("DOMRectReadOnly")}} object representing the animated value of the `viewBox` attribute.
+
+- If the `viewBox` attribute is being animated, `animVal` reflects the animated rectangle's x, y, width, and height.
+- If no animation is applied, `animVal` is identical to `baseVal`.
+
+## Examples
+
+```html
+<svg viewBox="0 0 200 100" id="mySvg">
+  <rect width="100" height="100" fill="blue" />
+</svg>
+
+<script>
+  const svgElement = document.getElementById("mySvg");
+  const animatedRect = svgElement.viewBox.animVal;
+
+  // Log the animated value (assuming an animation is applied)
+  console.log(animatedRect.x); // Will show the current animated x value
+  console.log(animatedRect.y); // Will show the current animated y value
+  console.log(animatedRect.width); // Will show the current animated width
+  console.log(animatedRect.height); // Will show the current animated height
+</script>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedRect.baseVal")}}
+- {{domxref("DOMRectReadOnly")}}

files/en-us/web/api/svganimatedrect/baseval/index.md

@@ -0,0 +1,49 @@
+---
+title: "SVGAnimatedRect: baseVal property"
+short-title: baseVal
+slug: Web/API/SVGAnimatedRect/baseVal
+page-type: web-api-instance-property
+browser-compat: api.SVGAnimatedRect.baseVal
+---
+
+{{APIRef("SVG")}}
+
+The **`SVGAnimatedRect.baseVal`** read-only property of the {{domxref("SVGAnimatedRect")}} interface represents the current non-animated value of the `viewBox` attribute. It returns a `DOMRect` object that reflects the current static rectangle value of the `viewBox` attribute, including the x, y, width, and height values.
+
+## Value
+
+A {{domxref("DOMRect")}} object representing the current non-animated value of the `viewBox` attribute.
+
+- The `DOMRect` object contains the x, y, width, and height values of the rectangle.
+
+## Examples
+
+```html
+<svg viewBox="0 0 200 100" id="mySvg">
+  <rect width="100" height="100" fill="blue" />
+</svg>
+
+<script>
+  const svgElement = document.getElementById("mySvg");
+  const animatedRect = svgElement.viewBox.baseVal;
+
+  // Access the non-animated base value
+  console.log(animatedRect.x); // 0
+  console.log(animatedRect.y); // 0
+  console.log(animatedRect.width); // 200
+  console.log(animatedRect.height); // 100
+</script>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedRect.animVal")}}
+- {{domxref("DOMRect")}}

files/en-us/web/api/svganimatedrect/index.md

@@ -58,14 +58,14 @@ The `SVGAnimatedRect` interface is used for attributes of basic {{ domxref("SVGR
   </thead>
   <tbody>
     <tr>
-      <td><code>baseVal</code></td>
+      <td><code>{{domxref("SVGAnimatedRect.baseVal")}}</code></td>
       <td>{{ domxref("SVGRect") }}</td>
       <td>
         The base value of the given attribute before applying any animations.
       </td>
     </tr>
     <tr>
-      <td><code>animVal</code></td>
+      <td><code>{{domxref("SVGAnimatedRect.animVal")}}</code></td>
       <td>{{ domxref("SVGRect") }}</td>
       <td>
         A read only {{ domxref("SVGRect") }} representing the current