add: examples

mdn · Dec 20, 2024 · cb22dd4 · cb22dd4
1 parent 9ddfa95
commit cb22dd4
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 4 deletions.
diff --git a/files/en-us/web/api/svganimatedpreserveaspectratio/animval/index.md b/files/en-us/web/api/svganimatedpreserveaspectratio/animval/index.md
@@ -8,11 +8,43 @@ browser-compat: api.SVGAnimatedPreserveAspectRatio.animVal
 
 {{APIRef("SVG")}}
 
-The **`animVal`** read-only property of the {{domxref("SVGAnimatedPreserveAspectRatio")}} interface represents the current animated value of the `preserveAspectRatio` attribute of an SVG element.
+The **`animVal`** read-only property of the {{domxref("SVGAnimatedPreserveAspectRatio")}} interface represents the current animated value of the {{SVGAttr("preserveAspectRatio")}} attribute of an SVG element. This property reflects the current value after any animations or transformations are applied.
 
 ## Value
 
-An {{domxref("SVGPreserveAspectRatio")}} object; the animated value of the `preserveAspectRatio` attribute.
+An {{domxref("SVGPreserveAspectRatio")}} object.
+
+## Examples
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <image
+    id="myImage"
+    href="image.jpg"
+    width="50"
+    height="50"
+    preserveAspectRatio="xMinYMin meet">
+    <animate
+      attributeName="preserveAspectRatio"
+      from="xMinYMin meet"
+      to="xMaxYMax slice"
+      dur="5s"
+      repeatCount="indefinite" />
+  </image>
+</svg>
+```
+
+We can access the animated value of `preserveAspectRatio` like this:
+
+```js
+const image = document.querySelector("#myImage");
+const animatedValue = image.preserveAspectRatio.animVal;
+
+console.log(animatedValue.align); // output: "xMaxYMax" (after animation)
+console.log(animatedValue.meetOrSlice); // output: "slice" (after animation)
+```
 
 ## Specifications
 

diff --git a/files/en-us/web/api/svganimatedpreserveaspectratio/baseval/index.md b/files/en-us/web/api/svganimatedpreserveaspectratio/baseval/index.md
@@ -8,11 +8,35 @@ browser-compat: api.SVGAnimatedPreserveAspectRatio.baseVal
 
 {{APIRef("SVG")}}
 
-The **`baseVal`** read-only property of the {{domxref("SVGAnimatedPreserveAspectRatio")}} interface represents the base (non-animated) value of the `preserveAspectRatio` attribute of an SVG element.
+The **`baseVal`** read-only property of the {{domxref("SVGAnimatedPreserveAspectRatio")}} interface represents the base (non-animated) value of the {{SVGAttr("preserveAspectRatio")}} attribute of an SVG element.
 
 ## Value
 
-An {{domxref("SVGPreserveAspectRatio")}} object; the non-animated value of the `preserveAspectRatio` attribute.
+An {{domxref("SVGPreserveAspectRatio")}} object.
+
+## Examples
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <image
+    href="image.jpg"
+    width="50"
+    height="50"
+    preserveAspectRatio="xMinYMin meet" />
+</svg>
+```
+
+You can access the `baseVal` of the `preserveAspectRatio` attribute like this:
+
+```js
+const image = document.querySelector("image");
+const preserveAspectRatio = image.preserveAspectRatio.baseVal;
+
+console.log(preserveAspectRatio.align); // output: "xMinYMin"
+console.log(preserveAspectRatio.meetOrSlice); // output: "meet"
+```
 
 ## Specifications