SVGAnimatedRect: animVal プロパティ

Baseline 広く利用可能

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