A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedNumber/animVal below:

SVGAnimatedNumber: animVal property - Web APIs

SVGAnimatedNumber: animVal property

Baseline Widely available

The animVal read-only property of the SVGAnimatedNumber interface represents the animated value of an SVG element's numeric attribute.

Some animatable SVG attributes accept a single number, such as the radius attribute of the <circle> or <ellipse> elements and the width and height attributes of the <rect> element, and many others. The animVal attribute provides access to the current animated value of the animatable numeric attribute during animations.

Value

A number; the current value of the animated attribute as a float.

Examples

This example includes a <path> element with a nested <animate> element that animates the value of the path's pathLength attribute:

<path d="M 0,40 h100" pathLength="90" id="path">
  <animate
    attributeName="pathLength"
    values="50; 90; 50;"
    dur="10s"
    repeatCount="indefinite" />
</path>
const path = document.querySelector("path");

console.log(path.pathLength.animVal); // output: 50
console.log(path.pathLength.baseVal); // output: 90

We use the animVal property to access the current value of the animating pathLength, while the SVGAnimatedNumber.baseVal reflects the base (non-animating) value of the pathLength.

Specifications Browser compatibility See also

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4