SVGAnimatedNumberList: baseVal プロパティ

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月⁩.

baseVal は 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;

// 基底値を変更
points.baseVal = [10, 15, 25, 30];

// 反映された属性値を検証
console.log(rect.getAttribute("points")); // 出力: "10,15 25,30"