<animateMotion>

Ngữ cảnh sử dụng

Thuộc tính

keyPoints

Thuộc tính này cho biết, trong phạm vi [0,1], đối tượng đi xa đến đâu dọc theo đường dẫn cho từng giá trị liên quan của keyTimes. Kiểu giá trị: <number>*; Giá trị mặc định: none; Có thể hoạt ảnh: không

path

Thuộc tính này định nghĩa đường dẫn của chuyển động, dùng cùng cú pháp với thuộc tính d. Kiểu giá trị: <string>; Giá trị mặc định: none; Có thể hoạt ảnh: không

rotate

Thuộc tính này định nghĩa một phép xoay được áp dụng cho phần tử đang được hoạt ảnh hóa dọc theo một đường dẫn, thường để nó hướng theo chiều của hoạt ảnh. Kiểu giá trị: <number> | auto | auto-reverse; Giá trị mặc định: 0; Có thể hoạt ảnh: không

Thuộc tính hoạt ảnh

Thuộc tính thời gian hoạt ảnh

begin, dur, end, min, max, restart, repeatCount, repeatDur, fill

Thuộc tính giá trị hoạt ảnh

calcMode, values, keyTimes, keySplines, from, to, by

Các thuộc tính hoạt ảnh khác

Đáng chú ý nhất: attributeName, additive, accumulate

Thuộc tính sự kiện hoạt ảnh

Đáng chú ý nhất: onbegin, onend, onrepeat

Giao diện DOM

Phần tử này triển khai giao diện SVGAnimateMotionElement.

Ví dụ

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

Đặc tả

Tương thích trình duyệt

Xem thêm

• <mpath>