SVGAnimatedRect: 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 は SVGAnimatedRect インターフェイスの読み取り専用プロパティで、 SVG 要素の viewBox 属性の現在のアニメーション前の値を表します。

このプロパティは、SVG 要素の viewBox 属性値を読み取り専用の DOMRect オブジェクトとして反映します。 viewBox 属性によって定義された静的な長方形にアクセスすることができ、x、y、width、height の値が記載されています。

値

DOMRect オブジェクトで、 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.baseVal;

// アニメーション前の基底値にアクセス
console.log(animatedRect.x); // 0
console.log(animatedRect.y); // 0
console.log(animatedRect.width); // 200
console.log(animatedRect.height); // 100