SVGAnimatedNumber: baseVal 属性
SVGAnimatedNumber
接口的 baseVal
属性代表可动画的数字属性的基础(非动画)值。
一些可动画的 SVG 属性接受单个数字值,例如 <circle>
或 <ellipse>
元素的 radius
属性,以及 <rect>
元素的 width
和 height
属性,还有许多其他属性。baseVal
属性反映并更新该数字属性的基础值或非动画值。
值
一个 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.baseVal); // output: 90
path.pathLength.baseVal = 50; // updates the value
console.log(path.pathLength.baseVal); // output: 90
baseVal
反映了 pathLength
属性的值。我们还使用 baseVal
属性来访问正在设置动画的 pathLength
的基础(非动画)值。
要访问 pathLength
值在动画过程中的当前值,请使用 SVGAnimatedNumber.animVal
属性。
规范
规范 |
---|
Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedNumber__baseVal |
浏览器兼容性
加载中…