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

animVal は SVGAnimatedNumber インターフェイスの読み取り専用プロパティで、 SVG 要素のアニメーション可能な実数型属性の（アニメーション中ではない）基底値を表します。

アニメーション可能な SVG 属性の中には、単一の実数を受け入れるものもあります。例えば、 <circle> や <ellipse> 要素の radius 属性や、 <rect> 要素の width および height 属性などで、他にも多数あります。 baseVal プロパティは、実数型属性の基底値（アニメーションしていない値）を反映し、更新します。

値

number です。アニメーション属性の基底値を実数で表したものです。

例

この例では、 <path> 要素の内側に、 <animate> 要素が含まれており、パスの pathLength 属性の値をアニメーションさせています。

html

<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.baseVal); // 出力: 90
path.pathLength.baseVal = 50; // 値を更新
console.log(path.pathLength.baseVal); // 出力: 90

baseVal は pathLength 属性の値を反映します。また、 baseVal プロパティを使用すると、アニメーション中の pathLength の（アニメーション中ではない）基底値にアクセスすることができます。

アニメーション中の pathLength 値の現在の値にアクセスするには、 SVGAnimatedNumber.animVal プロパティを使用してください。