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

瀏覽器相容性

另見