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 July 2015.
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>
js
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);
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedRect__animVal |