SVGAnimatedNumber: thuộc tính animVal
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính chỉ đọc animVal của giao diện SVGAnimatedNumber đại diện cho giá trị hoạt hình của thuộc tính số của phần tử SVG.
Một số thuộc tính SVG có thể hoạt hình chấp nhận một số đơn, chẳng hạn như thuộc tính radius của phần tử <circle> hoặc <ellipse>, các thuộc tính width và height của phần tử <rect>, và nhiều thuộc tính khác. Thuộc tính animVal cung cấp quyền truy cập vào giá trị hoạt hình hiện tại của thuộc tính số có thể hoạt hình trong quá trình hoạt hình.
Giá trị
Một number; giá trị hiện tại của thuộc tính hoạt hình dưới dạng số thực dấu phẩy động.
Ví dụ
Ví dụ này bao gồm một phần tử <path> với một phần tử <animate> lồng nhau hoạt hình giá trị của thuộc tính pathLength của đường dẫn:
<path d="M 0,40 h100" pathLength="90" id="path">
<animate
attributeName="pathLength"
values="50; 90; 50;"
dur="10s"
repeatCount="indefinite" />
</path>
const path = document.querySelector("path");
console.log(path.pathLength.animVal); // đầu ra: 50
console.log(path.pathLength.baseVal); // đầu ra: 90
Chúng ta sử dụng thuộc tính animVal để truy cập giá trị hiện tại của pathLength đang hoạt hình, trong khi SVGAnimatedNumber.baseVal phản ánh giá trị cơ sở (không hoạt hình) của pathLength.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedNumber__animVal |