SVGAnimatedPreserveAspectRatio: animVal プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
animVal は SVGAnimatedPreserveAspectRatio インターフェイスの読み取り専用プロパティで、アニメーションまたは座標変換が適用された後の SVG 要素の preserveAspectRatio 属性の値を表します。
値
SVGPreserveAspectRatio オブジェクトです。
例
次のような SVG があったとします。
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<image
id="myImage"
href="crows.jpg"
width="50"
height="50"
preserveAspectRatio="xMinYMin meet">
<animate
attributeName="preserveAspectRatio"
from="xMinYMin meet"
to="xMaxYMax slice"
dur="5s"
fill="freeze"
repeatCount="1" />
</image>
</svg>
この例では、 <image> 要素を定義し、その preserveAspectRatio 属性をアニメーションさせます。アニメーションは一度だけ実行され、 fill 属性を "freeze" に設定します。そのため、アニメーションが完了した後もアニメーションの効果が維持されます。
ページが読み込まれた直後に、次のコードを実行します。
js
const image = document.querySelector("#myImage");
const baseVal = image.preserveAspectRatio.baseVal;
const animVal = image.preserveAspectRatio.animVal;
console.log(baseVal.meetOrSlice); // 出力: 1 (SVG_MEETORSLICE_MEET)
console.log(animVal.meetOrSlice); // 出力: 1 (SVG_MEETORSLICE_MEET)
アニメーションが完了した後に、 animVal.meetOrSlice と baseVal.meetOrSlice の値を次のように再度ログ出力します。
js
console.log(baseVal.meetOrSlice); // 出力: 1 (SVG_MEETORSLICE_MEET)
console.log(animVal.meetOrSlice); // 出力: 2 (SVG_MEETORSLICE_SLICE)
fill を "remove" に設定した場合（または、fill を完全に除去した場合、 "remove" が既定であるため）、アニメーションが完了するとアニメーション効果も除去され、 animVal.meetOrSlice は 1 に戻ります。
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedPreserveAspectRatio__animVal |