SVGAnimatedNumberList: animVal プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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); // アニメーション中の状態