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 |
瀏覽器相容性
載入中…