SVGAnimatedNumber: baseVal 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

SVGAnimatedNumber 接口的 baseVal 属性代表可动画的数字属性的基础(非动画)值。

一些可动画的 SVG 属性接受单个数字值,例如 <circle><ellipse> 元素的 radius 属性,以及 <rect> 元素的 widthheight 属性,还有许多其他属性。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

浏览器兼容性

另见