SVGAnimatedPreserveAspectRatio：animVal 属性
SVGAnimatedPreserveAspectRatio 接口的只读属性 animVal 表示 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); // Output: 1 (SVG_MEETORSLICE_MEET)
console.log(animVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET)
如果在动画完成后再次记录 animVal.meetOrSlice 和 baseVal.meetOrSlice 的值，我们将看到以下内容：
js
console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET)
console.log(animVal.meetOrSlice); // Output: 2 (SVG_MEETORSLICE_SLICE)
请注意，如果我们设置 fill 为 "remove"（或者完全删除 fill，因为 "remove" 是默认值），那么动画效果将在动画完成后被移除，并且 animVal.meetOrSlice 将恢复为 1。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedPreserveAspectRatio__animVal |
浏览器兼容性
加载中…