Skip to content

Commit

Permalink
MDN Feature Pages for SVGAnimatedAngle: animVal and baseVal (#37068)
Browse files Browse the repository at this point in the history
* add: MDN Feature Pages for SVGAnimatedAngle animaval and baseval interface

* simplified example, changed wording for <angle> to content type

* add proper comments to code example

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

Co-authored-by: Estelle Weyl <[email protected]>

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

Co-authored-by: Estelle Weyl <[email protected]>

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

Co-authored-by: Estelle Weyl <[email protected]>

* fix console comments

---------

Co-authored-by: Estelle Weyl <[email protected]>
  • Loading branch information
yashrajbharti and estelle authored Dec 6, 2024
1 parent 04e4faf commit 6db682e
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 2 deletions.
48 changes: 48 additions & 0 deletions files/en-us/web/api/svganimatedangle/animval/index.md
Original file line number Diff line number Diff line change
@@ -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 [`<angle>`](/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 [`<angle>`](/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)
46 changes: 46 additions & 0 deletions files/en-us/web/api/svganimatedangle/baseval/index.md
Original file line number Diff line number Diff line change
@@ -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 [`<angle>`](/en-US/docs/Web/SVG/Content_type#angle) on an SVG element. This property is used to retrieve the static value of the `<angle>`, unaffected by any ongoing animations.

This property reflects the `<angle>` 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 [`<angle>`](/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)
4 changes: 2 additions & 2 deletions files/en-us/web/api/svganimatedangle/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,14 @@ The `SVGAnimatedAngle` interface is used for attributes of basic type [\<angle>]
</thead>
<tbody>
<tr>
<td><code>baseVal</code></td>
<td><code>{{domxref("SVGAnimatedAngle.baseVal")}}</code></td>
<td>{{ domxref("SVGAngle") }}</td>
<td>
The base value of the given attribute before applying any animations.
</td>
</tr>
<tr>
<td><code>animVal</code></td>
<td><code>{{domxref("SVGAnimatedAngle.animVal")}}</code></td>
<td>{{ domxref("SVGAngle") }}</td>
<td>
A read only {{ domxref("SVGAngle") }} representing the current
Expand Down

0 comments on commit 6db682e

Please sign in to comment.