-
Notifications
You must be signed in to change notification settings - Fork 22.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MDN Feature Pages for SVGAnimatedAngle: animVal and baseVal (#37068)
* 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
1 parent
04e4faf
commit 6db682e
Showing
3 changed files
with
96 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters