SVGAnimatedRect: 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 は SVGAnimatedRect インターフェイスの読み取り専用プロパティで、 SVG 要素の viewBox 属性の現在のアニメーション値を、読み取り専用の DOMRectReadOnly オブジェクトとして表します。アニメーション中の x、y、width、height の値など、長方形の動的な状態にアクセスする機能を提供します。

アニメーションが適用されていない場合、 animVal プロパティは SVG 要素の viewBox 属性値を反映し、 SVGAnimatedRect.baseVal と等しくなります。

値

DOMRectReadOnly オブジェクトで、 viewBox 属性のアニメーション中の値を表します。

例

html

<svg viewBox="0 0 200 100" id="mySvg">
  <rect width="100" height="100" fill="blue" />
</svg>

const svgElement = document.getElementById("mySvg");
const animatedRect = svgElement.viewBox.animVal;

// アニメーション中の値をログ出力（アニメーションが適用されていると想定）
console.log(animatedRect.x);
console.log(animatedRect.y);
console.log(animatedRect.width);
console.log(animatedRect.height);