SVGAnimatedNumber: animVal 属性
SVGAnimatedNumber 接口的只读属性 animVal 表示 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); // output: 50
console.log(path.pathLength.baseVal); // output: 90
我们使用 animVal 属性来访问正在动画的 pathLength 的当前值,而 SVGAnimatedNumber.baseVal 反映的是 pathLength 的基础(非动画)值。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedNumber__animVal |
浏览器兼容性
加载中…