From 6db682e5b5717b90a47135134434191c265970d8 Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Fri, 6 Dec 2024 23:54:12 +0530 Subject: [PATCH 01/24] MDN Feature Pages for SVGAnimatedAngle: animVal and baseVal (#37068) * add: MDN Feature Pages for SVGAnimatedAngle animaval and baseval interface * simplified example, changed wording for to content type * add proper comments to code example * Update files/en-us/web/api/svganimatedangle/animval/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svganimatedangle/baseval/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svganimatedangle/animval/index.md Co-authored-by: Estelle Weyl * fix console comments --------- Co-authored-by: Estelle Weyl --- .../web/api/svganimatedangle/animval/index.md | 48 +++++++++++++++++++ .../web/api/svganimatedangle/baseval/index.md | 46 ++++++++++++++++++ files/en-us/web/api/svganimatedangle/index.md | 4 +- 3 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 files/en-us/web/api/svganimatedangle/animval/index.md create mode 100644 files/en-us/web/api/svganimatedangle/baseval/index.md diff --git a/files/en-us/web/api/svganimatedangle/animval/index.md b/files/en-us/web/api/svganimatedangle/animval/index.md new file mode 100644 index 000000000000000..400f79ea4ecb608 --- /dev/null +++ b/files/en-us/web/api/svganimatedangle/animval/index.md @@ -0,0 +1,48 @@ +--- +title: "SVGAnimatedAngle: animVal property" +short-title: animVal +slug: Web/API/SVGAnimatedAngle/animVal +page-type: web-api-instance-property +browser-compat: api.SVGAnimatedAngle.animVal +--- + +{{APIRef("SVG")}} + +The **`animVal`** read-only property of the {{domxref("SVGAnimatedAngle")}} interface represents the current animated value of the associated [``](/en-US/docs/Web/SVG/Content_type#angle) on an SVG element. If the attribute is not currently being animated, `animVal` will be the same as the `baseVal`. + +This property reflects the animated state of the angle of the animating {{SVGattr("orient")}} attribute of the SVG {{SVGElement("marker")}} element, providing access to the value of the angle during animations. + +## Value + +An {{domxref("SVGAngle")}} object representing the animated value of the [``](/en-US/docs/Web/SVG/Content_type#angle) content type. + +- If the angle is being animated, `animVal` will reflect the current animation state. +- If the angle is not animated, `animVal` will be identical to {{domxref("SVGAnimatedAngle.baseVal")}}. + +## Examples + +```js +const marker = document.querySelector("[orient]"); + +// Set an initial angle for the orient attribute +marker.setAttribute("orient", "45"); + +// Access the animated value of the angle +const animAngle = marker.orientAngle.animVal; // an SVGAngle object + +console.log(animAngle.value); // Output: 45 (current animated value of the angle) +console.log(animAngle.unitType); // Output: 2 (constant for SVG_ANGLETYPE_DEG) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedAngle.baseVal")}} +- {{domxref("SVGAngle")}} and [angle `value` constants](/en-US/docs/Web/API/SVGAngle#constants) diff --git a/files/en-us/web/api/svganimatedangle/baseval/index.md b/files/en-us/web/api/svganimatedangle/baseval/index.md new file mode 100644 index 000000000000000..1c4134ddb43983a --- /dev/null +++ b/files/en-us/web/api/svganimatedangle/baseval/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGAnimatedAngle: baseVal property" +short-title: baseVal +slug: Web/API/SVGAnimatedAngle/baseVal +page-type: web-api-instance-property +browser-compat: api.SVGAnimatedAngle.baseVal +--- + +{{APIRef("SVG")}} + +The **`baseVal`** read-only property of the {{domxref("SVGAnimatedAngle")}} interface represents the base (non-animated) value of the associated [``](/en-US/docs/Web/SVG/Content_type#angle) on an SVG element. This property is used to retrieve the static value of the ``, unaffected by any ongoing animations. + +This property reflects the `` value of the {{SVGattr("orient")}} attribute of the SVG {{SVGElement("marker")}} element, which is the same as the {{domxref("SVGMarkerElement.orientAngle")}} property. + +## Value + +An {{domxref("SVGAngle")}} object representing the base value of the [``](/en-US/docs/Web/SVG/Content_type#angle) content type. + +- The value is unaffected by animations, representing the initial state of the angle. +- The unit type of the angle can be retrieved from {{domxref("SVGAngle.unitType")}}. + +## Examples + +```js +const marker = document.querySelector("[orient]"); + +// Set the orient attribute with an angle +marker.setAttribute("orient", "90"); +const baseAngle = marker.orientAngle.baseVal; // an SVGAngle object + +console.log(baseAngle.value); // Output: 90 +console.log(baseAngle.unitType); // Output: 1 (constant for SVG_ANGLETYPE_UNSPECIFIED) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedAngle.animVal")}} +- {{domxref("SVGAngle")}} and [angle `value` constants](/en-US/docs/Web/API/SVGAngle#constants) diff --git a/files/en-us/web/api/svganimatedangle/index.md b/files/en-us/web/api/svganimatedangle/index.md index bd9a3c12a6e783d..993def27c8c9777 100644 --- a/files/en-us/web/api/svganimatedangle/index.md +++ b/files/en-us/web/api/svganimatedangle/index.md @@ -60,14 +60,14 @@ The `SVGAnimatedAngle` interface is used for attributes of basic type [\] - baseVal + {{domxref("SVGAnimatedAngle.baseVal")}} {{ domxref("SVGAngle") }} The base value of the given attribute before applying any animations. - animVal + {{domxref("SVGAnimatedAngle.animVal")}} {{ domxref("SVGAngle") }} A read only {{ domxref("SVGAngle") }} representing the current From 4f59a1b67315a09e31a0521eb5a6f976ece9ab3c Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Sat, 7 Dec 2024 02:14:26 +0530 Subject: [PATCH 02/24] 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 * Update files/en-us/web/api/svganimatedtransformlist/animval/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svganimatedtransformlist/baseval/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svganimatedtransformlist/baseval/index.md Co-authored-by: Estelle Weyl * 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 --- .../svganimatedtransformlist/animval/index.md | 43 +++++++++++++++++++ .../svganimatedtransformlist/baseval/index.md | 43 +++++++++++++++++++ .../web/api/svganimatedtransformlist/index.md | 4 +- 3 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 files/en-us/web/api/svganimatedtransformlist/animval/index.md create mode 100644 files/en-us/web/api/svganimatedtransformlist/baseval/index.md diff --git a/files/en-us/web/api/svganimatedtransformlist/animval/index.md b/files/en-us/web/api/svganimatedtransformlist/animval/index.md new file mode 100644 index 000000000000000..90e002ecbb82266 --- /dev/null +++ b/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")}} diff --git a/files/en-us/web/api/svganimatedtransformlist/baseval/index.md b/files/en-us/web/api/svganimatedtransformlist/baseval/index.md new file mode 100644 index 000000000000000..99743848c182f9c --- /dev/null +++ b/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")}} diff --git a/files/en-us/web/api/svganimatedtransformlist/index.md b/files/en-us/web/api/svganimatedtransformlist/index.md index a430e4a89306f85..3013ea71da7c348 100644 --- a/files/en-us/web/api/svganimatedtransformlist/index.md +++ b/files/en-us/web/api/svganimatedtransformlist/index.md @@ -62,14 +62,14 @@ The `SVGAnimatedTransformList` interface is used for attributes which take a lis - baseVal + {{domxref("SVGAnimatedTransformList.baseVal", "baseVal")}} {{ domxref("SVGTransformList") }} The base value of the given attribute before applying any animations. - animVal + {{domxref("SVGAnimatedTransformList.animVal", "animVal")}} {{ domxref("SVGTransformList") }} A read only {{ domxref("SVGTransformList") }} representing From b7b0b7c096525c24c22d80f79448823c747491e7 Mon Sep 17 00:00:00 2001 From: jolka-ef <94794622+jolka-ef@users.noreply.github.com> Date: Fri, 6 Dec 2024 23:46:12 +0100 Subject: [PATCH 03/24] remove i flag from pattern in example (#37119) --- .../javascript/reference/regular_expressions/modifier/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/reference/regular_expressions/modifier/index.md b/files/en-us/web/javascript/reference/regular_expressions/modifier/index.md index f1c8fc8fa77a055..2df6507705987ee 100644 --- a/files/en-us/web/javascript/reference/regular_expressions/modifier/index.md +++ b/files/en-us/web/javascript/reference/regular_expressions/modifier/index.md @@ -85,7 +85,7 @@ pattern.test(input2); // false Imagine you are finding all variable declarations called `foo` or `bar` (because they are bad names). The word may appear in any case, but you know the keyword is always lowercase, so you can do this: ```js -const pattern = /(?:var|let|const) (?i:foo|bar)\b/i; +const pattern = /(?:var|let|const) (?i:foo|bar)\b/; pattern.test("let foo;"); // true pattern.test("const BAR = 1;"); // true From 75c5e27d00ae191a3f549820c61d5bfff31428f8 Mon Sep 17 00:00:00 2001 From: jolka-ef <94794622+jolka-ef@users.noreply.github.com> Date: Fri, 6 Dec 2024 23:46:52 +0100 Subject: [PATCH 04/24] fix: mismatch between code and return value (#37120) --- .../javascript/reference/global_objects/iterator/some/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/javascript/reference/global_objects/iterator/some/index.md b/files/en-us/web/javascript/reference/global_objects/iterator/some/index.md index b93111720cfa60a..ab31e6a1cd39475 100644 --- a/files/en-us/web/javascript/reference/global_objects/iterator/some/index.md +++ b/files/en-us/web/javascript/reference/global_objects/iterator/some/index.md @@ -52,8 +52,7 @@ const isEven = (x) => x % 2 === 0; console.log(fibonacci().some(isEven)); // true const isNegative = (x) => x < 0; -const isPositive = (x) => x > 0; -console.log(fibonacci().take(10).some(isPositive)); // false +console.log(fibonacci().take(10).some(isNegative)); // false console.log(fibonacci().some(isNegative)); // Never completes ``` From c7ee557d776d91998eeec005b6c794f03d6079ad Mon Sep 17 00:00:00 2001 From: Yanko1013 Date: Sat, 7 Dec 2024 06:56:34 +0800 Subject: [PATCH 05/24] string.concat() is not useful (#37122) * Update string/concat/index.md Add {{optional_inline}}, same as array/concat * Update index.md --------- Co-authored-by: Joshua Chen --- .../javascript/reference/global_objects/string/concat/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/javascript/reference/global_objects/string/concat/index.md b/files/en-us/web/javascript/reference/global_objects/string/concat/index.md index 2a2542db4a6f9f5..3764784b30a5b1c 100644 --- a/files/en-us/web/javascript/reference/global_objects/string/concat/index.md +++ b/files/en-us/web/javascript/reference/global_objects/string/concat/index.md @@ -15,7 +15,6 @@ the string arguments to this string and returns a new string. ## Syntax ```js-nolint -concat() concat(str1) concat(str1, str2) concat(str1, str2, /* …, */ strN) @@ -24,7 +23,7 @@ concat(str1, str2, /* …, */ strN) ### Parameters - `str1`, …, `strN` - - : One or more strings to concatenate to `str`. + - : One or more strings to concatenate to `str`. Though technically permitted, calling `String.prototype.concat()` with no arguments is a useless operation, because it does not result in observable copying (like {{jsxref("Array.prototype.concat()")}}), since strings are immutable. It should only happen if you are [spreading](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) an array of strings as arguments, and that array happens to be empty. ### Return value From 6f7a8b86190fc2bab6420e955fb2f086bafb405a Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 6 Dec 2024 14:56:51 -0800 Subject: [PATCH 06/24] typo (#37127) --- files/en-us/web/css/css_transforms/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_transforms/index.md b/files/en-us/web/css/css_transforms/index.md index e597e3ade23a949..0039e22c9679f26 100644 --- a/files/en-us/web/css/css_transforms/index.md +++ b/files/en-us/web/css/css_transforms/index.md @@ -699,7 +699,7 @@ The cube in the above example is comprised of six `
` elements, all of which - {{cssxref("transform-function/skewX", "skewX()")}} - {{cssxref("transform-function/skewY", "skewY()")}} - {{cssxref("transform-function/translate", "translate()")}} -- {{cssxref("transform-function/translate3d", "translate()")}} +- {{cssxref("transform-function/translate3d", "translate3d()")}} - {{cssxref("transform-function/translateX", "translateX()")}} - {{cssxref("transform-function/translateY", "translateY()")}} - {{cssxref("transform-function/translateZ", "translateZ()")}} From f13c1fdd9eaa766d1e0fa909e72a8693ba03024f Mon Sep 17 00:00:00 2001 From: Eyad Al-Khalidy <41296016+eyad-alkhalidy@users.noreply.github.com> Date: Sat, 7 Dec 2024 01:01:33 +0200 Subject: [PATCH 07/24] Improve the definition of sibling nodes (#37106) Two nodes on the same hierarchical level are not necessarily siblings; they must share the same parent node to be considered siblings. --- .../client-side_web_apis/manipulating_documents/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md index 842649f39d5ca4c..49714d9a9281cda 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md @@ -83,7 +83,7 @@ Nodes are also referred to by their position in the tree relative to other nodes - **Child node**: A node _directly_ inside another node. For example, `IMG` is a child of `SECTION` in the above example. - **Descendant node**: A node _anywhere_ inside another node. For example, `IMG` is a child of `SECTION` in the above example, and it is also a descendant. `IMG` is not a child of `BODY`, as it is two levels below it in the tree, but it is a descendant of `BODY`. - **Parent node**: A node which has another node inside it. For example, `BODY` is the parent node of `SECTION` in the above example. -- **Sibling nodes**: Nodes that sit on the same level in the DOM tree. For example, `IMG` and `P` are siblings in the above example. +- **Sibling nodes**: Nodes that sit on the same level under the same parent node in the DOM tree. For example, `IMG` and `P` are siblings in the above example. It is useful to familiarize yourself with this terminology before working with the DOM, as a number of the code terms you'll come across make use of them. You may have also come across them if you have studied CSS (e.g. descendant selector, child selector). From 9a23308bcdf92b9f10abbc5ecbed2343b9346dd4 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Sat, 7 Dec 2024 06:44:42 +0530 Subject: [PATCH 08/24] Synchronize with BCD v5.6.22 (#37131) Co-authored-by: OnkarRuikar --- files/en-us/web/css/position-area/index.md | 4 +++- files/en-us/web/css/position-area_value/index.md | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/position-area/index.md b/files/en-us/web/css/position-area/index.md index 6a3efdd89355882..610fe281bb148c4 100644 --- a/files/en-us/web/css/position-area/index.md +++ b/files/en-us/web/css/position-area/index.md @@ -2,10 +2,12 @@ title: position-area slug: Web/CSS/position-area page-type: css-property +status: + - experimental browser-compat: css.properties.position-area --- -{{CSSRef}} +{{CSSRef}}{{SeeCompatTable}} The **`position-area`** [CSS](/en-US/docs/Web/CSS) property enables an anchor-positioned element to be positioned relative to the edges of its associated anchor element by placing the positioned element on one or more tiles of an implicit 3x3 grid, where the anchoring element is the center cell. diff --git a/files/en-us/web/css/position-area_value/index.md b/files/en-us/web/css/position-area_value/index.md index fcb0113657b8fe1..f0461c359d7b9c4 100644 --- a/files/en-us/web/css/position-area_value/index.md +++ b/files/en-us/web/css/position-area_value/index.md @@ -2,10 +2,12 @@ title: slug: Web/CSS/position-area_value page-type: css-type +status: + - experimental browser-compat: css.properties.position-area --- -{{CSSRef}} +{{CSSRef}}{{SeeCompatTable}} The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) defines the cell or spanned cells of a **position-area grid**, a 3x3 grid whose center cell is an anchor element. From a99abeab30729181dde26fe362aeebb2a567c19e Mon Sep 17 00:00:00 2001 From: Mahdi Hosseinzadeh <29678011+mahozad@users.noreply.github.com> Date: Sun, 8 Dec 2024 09:39:54 +0330 Subject: [PATCH 09/24] Fix a missing word (#37134) --- files/en-us/web/media/formats/codecs_parameter/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/media/formats/codecs_parameter/index.md b/files/en-us/web/media/formats/codecs_parameter/index.md index 40279faa7c9b449..238b8e824196b26 100644 --- a/files/en-us/web/media/formats/codecs_parameter/index.md +++ b/files/en-us/web/media/formats/codecs_parameter/index.md @@ -58,7 +58,7 @@ Several of the links above go to the same section; that's because those media ty ### AV1 -The syntax of the `codecs` parameter for AV1 is defined the [AV1 Codec ISO Media File Format Binding](https://aomediacodec.github.io/av1-isobmff/) specification, section 5: [Codecs Parameter String](https://aomediacodec.github.io/av1-isobmff/#codecsparam). +The syntax of the `codecs` parameter for AV1 is defined in the [AV1 Codec ISO Media File Format Binding](https://aomediacodec.github.io/av1-isobmff/) specification, section 5: [Codecs Parameter String](https://aomediacodec.github.io/av1-isobmff/#codecsparam). ```plain av01.P.LLT.DD[.M.CCC.cp.tc.mc.F] From ec7b3262bcd4a03a09bab0c57e3de4b51d4de4f8 Mon Sep 17 00:00:00 2001 From: Brant Cass <94635676+brantcass@users.noreply.github.com> Date: Sun, 8 Dec 2024 00:12:36 -0600 Subject: [PATCH 10/24] Fix: removed unnecessary webgl.css link (#37125) --- .../tutorial/adding_2d_content_to_a_webgl_context/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md index 77fa2e4240a0ddf..782f2c17115d485 100644 --- a/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md +++ b/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md @@ -23,7 +23,6 @@ This project uses the [glMatrix](https://glmatrix.net/) library to perform its m WebGL Demo - +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{SVGAttr("viewBox")}} +- {{domxref("DOMRectReadOnly")}} diff --git a/files/en-us/web/api/svganimatedrect/baseval/index.md b/files/en-us/web/api/svganimatedrect/baseval/index.md new file mode 100644 index 000000000000000..c7eea2560a3c767 --- /dev/null +++ b/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 **`baseVal`** read-only property of the {{domxref("SVGAnimatedRect")}} interface represents the current non-animated value of the `viewBox` attribute of an SVG element. + +This property reflects the SVG element's {{SVGAttr("viewBox")}} attribute value as a read-only {{domxref("DOMRect")}} object. It provides access to the static rectangle defined by 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. + +## Examples + +```html + + + +``` + +```js +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 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{SVGAttr("viewBox")}} +- {{domxref("DOMRect")}} diff --git a/files/en-us/web/api/svganimatedrect/index.md b/files/en-us/web/api/svganimatedrect/index.md index f8f8fa3950c953e..82e62ff27455177 100644 --- a/files/en-us/web/api/svganimatedrect/index.md +++ b/files/en-us/web/api/svganimatedrect/index.md @@ -58,14 +58,14 @@ The `SVGAnimatedRect` interface is used for attributes of basic {{ domxref("SVGR - baseVal + {{domxref("SVGAnimatedRect.baseVal")}} {{ domxref("SVGRect") }} The base value of the given attribute before applying any animations. - animVal + {{domxref("SVGAnimatedRect.animVal")}} {{ domxref("SVGRect") }} A read only {{ domxref("SVGRect") }} representing the current