Thuộc tính offset-path CSS

Định nghĩa và cách sử dụng

offset-path Thuộc tính này được sử dụng để tạo một con đường cho phần tử animation.

Tạo một con đường cho animation <div>:

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

offset-path: none|path()|ray()|url()|basic-shape|coord-box|initial|inherit;

Giá trị	Mô tả
none	Mặc định. Giá trị mặc định của thuộc tính offset-path của phần tử.
path()	Định nghĩa con đường bằng ngữ pháp SVG. Xem thêm:SVG Path.
ray()	Định nghĩa con đường bằng hàm CSS ray().
url()	Định nghĩa con đường bằng URL tệp SVG.
<basic-shape>	Định nghĩa hình dạng cơ bản bằng hàm CSS (như inset(), circle(), ellipse() hoặc polygon()) để định nghĩa con đường.
<coord-box>	Định nghĩa con đường bằng khung tọa độ.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Giá trị mặc định:	none
Kế thừa:	Không
Tạo animation:	Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Ngữ pháp JavaScript:	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome	Edge	Firefox	Safari	Opera
55	79	72	15.4	45