SVGAnimationElement: phương thức getStartTime()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Phương thức getStartTime() của SVGAnimationElement trả về một số thực biểu thị thời gian bắt đầu, tính bằng giây, cho khoảng hiện tại của phần tử hoạt hình này, nếu nó tồn tại, bất kể khoảng đó đã bắt đầu hay chưa.
Thời gian bắt đầu được trả về bởi getStartTime() được đo bằng giây so với thời điểm không của vùng chứa thời gian.
Thời điểm không là lúc vùng chứa thời gian bắt đầu dòng thời gian của nó. Nó hoạt động như điểm tham chiếu bắt đầu cho tất cả các hoạt hình trong vùng chứa đó.
Vùng chứa thời gian là một phần tử hoặc ngữ cảnh xác định dòng thời gian cục bộ cho một hoặc nhiều hoạt hình. Các hoạt hình bên trong vùng chứa thời gian được đo so với dòng thời gian của nó. Nếu một vùng chứa thời gian bị trì hoãn, tạm dừng hoặc bị thao tác, tất cả các hoạt hình trong đó sẽ điều chỉnh theo.
Thuộc tính này phản ánh thuộc tính begin của phần tử <animate>, <animateMotion> hoặc <animateTransform>.
Cú pháp
getStartTime()
Tham số
Không có (undefined).
Giá trị trả về
Một số thực (float).
Ngoại lệ
InvalidStateErrorDOMException-
Được ném ra nếu
SVGAnimationElementkhông có khoảng hiện tại. Điều này xảy ra khi thời gianbegincủa phần tử hoạt hình chưa đến hoặc chưa được xác định, do đó phương thứcgetStartTime()không thể xác định thời gian bắt đầu hợp lệ. Ví dụ như khi hoạt hình được đặt để bắt đầu tạibegin="click", nhưng người dùng chưa nhấp để kích hoạt nó.
Ví dụ
Ví dụ này minh họa cách thuộc tính begin="3s" làm cho hoạt hình bắt đầu 3 giây sau khi dòng thời gian của vùng chứa thời gian bắt đầu.
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="50" cy="50" r="20" fill="rebeccapurple">
<animate attributeName="cx" from="50" to="150" dur="5s" begin="3s" />
</circle>
</svg>
const animationElement = document.querySelector("animate");
const startTime = animationElement.getStartTime();
console.log(
`The animation starts at: ${startTime} seconds relative to the time container's timeline`,
); // Output: 3
Phương thức getStartTime() trả về 3.0 vì đó là thời gian so với thời điểm không của vùng chứa thời gian.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| SVG Animations Level 2 # __svg__SVGAnimationElement__getStartTime |