Thuộc tính paint-order CSS

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

paint-order Thuộc tính xác định thứ tự vẽ của phần tử SVG hoặc văn bản.

Lưu ý:Đối với phần tử văn bản, chỉ có thể thay đổi thứ tự vẽ của stroke (vẽ viền) và fill (điền), vì markers (dấu hiệu) không áp dụng.

Thay đổi thứ tự vẽ của phần tử SVG <circle>:

circle {
  paint-order: stroke fill;
}

Thay đổi thứ tự vẽ của phần tử SVG <text> có điền màu dần:

text {
  paint-order: stroke fill;
}

paint-order: normal|Một giá trị|Hai giá trị|Ba giá trị|initial|inherit;

Giá trị	Mô tả
normal	Giá trị mặc định. Thứ tự vẽ là fill, stroke, markers.
Một giá trị	Vẽ sẽ bắt đầu từ giá trị đã cung cấp, sau đó tiếp tục theo thứ tự mặc định cho phần còn lại. Nếu chỉ định "stroke", hoạt động vẽ tiếp theo sẽ là fill (điền), sau đó là markers (dấu hiệu).
Hai giá trị	Vẽ sẽ bắt đầu từ giá trị đã cung cấp, sau đó tiếp tục theo thứ tự mặc định cho phần còn lại. Nếu chỉ định "stroke markers", hoạt động vẽ tiếp theo sẽ là fill (điền).
Ba giá trị	Vẽ sẽ được thực hiện theo giá trị đã cung cấp.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Giá trị mặc định:	normal
Kế thừa:	yes
Chế tạo animation:	Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Cú pháp JavaScript:	object.style.paintOrder="stroke fill"

Số 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
35.0	17.0	60.0	8.0	22.0