SVGAnimatedNumber: 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 は SVGAnimatedNumber インターフェイスの読み取り専用プロパティで、 SVG 要素の実数型属性のアニメーション中の値を表します。
アニメーション可能な SVG 属性の中には、単一の実数を受け入れるものもあります。例えば、 <circle> や <ellipse> 要素の radius 属性や、 <rect> 要素の width および height 属性などで、他にも多数あります。 animVal 属性により、アニメーション中にアニメーション可能な実数型属性の現在のアニメーション値にアクセスことができます。
値
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>
js
const path = document.querySelector("path");
console.log(path.pathLength.animVal); // 出力: 50
console.log(path.pathLength.baseVal); // 出力: 90
animVal プロパティを使用すると、 pathLength のアニメーション中の現在の値にアクセスできるのに対し、 SVGAnimatedNumber.baseVal は、 pathLength の（アニメーション中の値ではない）基底値を反映します。
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedNumber__animVal |
ブラウザーの互換性
Loading…