SVGAnimatedNumberList: animVal プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

animVal は SVGAnimatedNumberList インターフェイスの読み取り専用プロパティで、<number>の値のリストを受け入れるアニメーション可能な属性のアニメーション中の現在の値を表します。

このプロパティは、 <svg> 要素の viewBox 属性、 feColorMatrix 要素の values 属性、 <rect>、<polygon>、<polyline> 要素の points 属性を読み取り専用の SVGNumberList として反映し、 points 属性で定義された点の動的に更新されるリストへのアクセスを提供します。

値

SVGNumberList オブジェクトで、この属性のアニメーション中の値を表します。このリストには、属性で指定された個々の数値に対応する 1 つ以上の数値が含まれています。

例

const rect = document.querySelector("rect");

// アニメーション可能な 'points' 属性を数値で設定する
rect.setAttribute("points", "10,10 20,10 20,20 10,20");

// SVGAnimatedNumberList オブジェクトへアクセス
const points = rect.points;

console.dir(points.animVal); // アニメーション中の状態