SVGAnimationElement: phương thức getCurrentTime()

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 getCurrentTime() của SVGAnimationElement trả về một số thực biểu thị thời gian hiện tại tính bằng giây so với thời điểm không của vùng chứa thời gian đã cho.

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.

Cú pháp

getCurrentTime()

<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="4s"
      repeatCount="indefinite" />
  </circle>
</svg>

const animationElement = document.querySelector("animate");

setInterval(() => {
  const currentTime = animationElement.getCurrentTime();
  console.log(
    `Current time relative to the time container: ${currentTime} seconds`,
  );
}, 1000);

Hoạt hình bắt đầu tại time zero = 0 và chạy vô thời hạn, và giá trị getCurrentTime() tăng liên tục trong ngữ cảnh của vùng chứa thời gian.