MDN feature pages for SVGAnimatedTransformList (#37077)

* add: MDN feature pages for SVGAnimatedTransformList

* Update files/en-us/web/api/svganimatedtransformlist/baseval/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/web/api/svganimatedtransformlist/animval/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/web/api/svganimatedtransformlist/baseval/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/web/api/svganimatedtransformlist/baseval/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* fix: changed to console dir for objects

* fix: property value for animval

* simplified code example

* fix: see also section with relevant links

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

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

@@ -0,0 +1,43 @@
+---
+title: SVGAnimatedTransformList.animVal Property
+short-title: animVal
+slug: Web/API/SVGAnimatedTransformList/animVal
+page-type: web-api-instance-property
+browser-compat: api.SVGAnimatedTransformList.animVal
+---
+
+{{APIRef("SVG")}}
+
+The **`animVal`** read-only property of the {{domxref("SVGAnimatedTransformList")}} interface represents the animated value of the `transform` attribute of an SVG element.
+
+This property reflects the SVG element's {{SVGAttr("transform")}}, the {{SVGElement("linearGradient")}} or {{SVGElement("radialGradient")}} element's {{SVGAttr("gradientTransform")}} attribute, or the {{SVGElement("pattern")}} element's {{SVGAttr("patternTransform")}} attribute as a readonly {{ domxref("SVGTransformList") }}, providing access to the dynamically updated {{ domxref("SVGTransform") }} for each transform function during an animation. If no animation is active, this property will return the same value as `baseVal`.
+
+## Value
+
+An {{domxref("SVGTransformList")}} object that reflects the current animated value of the `transform` attribute.
+
+## Examples
+
+```js
+// Get the rectangle element
+const rect = document.querySelector("rect");
+
+// Access the animated transform list (if any)
+const animTransforms = rect.transform.animVal;
+
+// Log the animated transforms to the console
+console.dir(animTransforms);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGTransformList")}}
+- {{domxref("SVGTransform")}}

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

@@ -0,0 +1,43 @@
+---
+title: SVGAnimatedTransformList.baseVal Property
+short-title: baseVal
+slug: Web/API/SVGAnimatedTransformList/baseVal
+page-type: web-api-instance-property
+browser-compat: api.SVGAnimatedTransformList.baseVal
+---
+
+{{APIRef("SVG")}}
+
+The **`baseVal`** read-only property of the {{domxref("SVGAnimatedTransformList")}} interface represents the non-animated value of the `transform` attribute of an SVG element.
+
+This property reflects the SVG element's {{SVGAttr("transform")}}, the {{SVGElement("linearGradient")}} or {{SVGElement("radialGradient")}} element's {{SVGAttr("gradientTransform")}} attribute, or the {{SVGElement("pattern")}} element's {{SVGAttr("patternTransform")}} attribute value as a readonly {{ domxref("SVGTransformList") }}, providing access to a static {{ domxref("SVGTransform") }} for each transform function set on the SVG element.
+
+## Value
+
+An {{domxref("SVGTransformList")}} object that represents the current, non-animated value of the `transform` attribute.
+
+## Examples
+
+```js
+// Get the rectangle element
+const rect = document.querySelector("rect");
+
+// Access the non-animated transform list of the element
+const baseTransforms = rect.transform.baseVal;
+
+// Log the base transforms to the console
+console.dir(baseTransforms);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGTransformList")}}
+- {{domxref("SVGTransform")}}

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

@@ -62,14 +62,14 @@ The `SVGAnimatedTransformList` interface is used for attributes which take a lis
   </thead>
   <tbody>
     <tr>
-      <td><code>baseVal</code></td>
+      <td><code>{{domxref("SVGAnimatedTransformList.baseVal", "baseVal")}}</code></td>
       <td>{{ domxref("SVGTransformList") }}</td>
       <td>
         The base value of the given attribute before applying any animations.
       </td>
     </tr>
     <tr>
-      <td><code>animVal</code></td>
+      <td><code>{{domxref("SVGAnimatedTransformList.animVal", "animVal")}}</code></td>
       <td>{{ domxref("SVGTransformList") }}</td>
       <td>
         A read only {{ domxref("SVGTransformList") }} representing