Đặt hàng sơn - Thủ thuật CSS

Anonim

paint-orderThuộc tính CSS đặt thứ tự mà các hình dạng và văn bản SVG được vẽ, bao gồm tô màu, nét vẽ và bất kỳ điểm đánh dấu nào có thể được sử dụng. Theo mặc định, các thuộc tính đó được vẽ theo thứ tự: tô màu, nét vẽ và điểm đánh dấu. Thuộc tính này cho phép chúng tôi chuyển nó lên để chúng tôi có nhiều quyền kiểm soát hơn đối với giao diện kết quả.

Nơi thuộc tính này thực sự tỏa sáng là với văn bản SVG, đặc biệt là một phần tử có cả tô màu và nét vẽ. Như thế này:

Ugh, cú đánh đó thật kinh khủng. Nó chỉ rộng 6px, nhưng nó bao phủ phần tô màu. Đó là bởi vì tô màu được vẽ đầu tiên, theo mặc định, tiếp theo là nét vẽ. Nhưng nếu chúng ta đảo ngược điều đó bằng cách sử dụng thuộc paint-ordertính, phần tô sẽ được sơn cuối cùng và che đi những phần khó coi của nét vẽ.

Ôi trời, tốt hơn rất nhiều! Chúng ta thực sự có thể đọc văn bản và nét vẽ giống với hình dạng của các ký tự hơn trước.

Cú pháp

paint-order: normal | ( fill || stroke || markers )
  • Giá trị ban đầu: normal
  • Áp dụng cho: hình dạng và các yếu tố nội dung văn bản
  • Kế thừa: có
  • Loại hoạt ảnh: rời rạc

Giá trị

/* Normal */ paint-order: normal; /* Single values */ paint-order: stroke; /* same as: stroke fill markers */ paint-order: markers; /* same as: markers fill stroke */ /* Multiple values */ paint-order: stroke fill; /* same as: stroke fill markers */ paint-order: markers stroke fill;

Cần lưu ý rằng việc chuyển một giá trị là hoàn toàn hợp pháp. Ví dụ: nếu chúng tôi đã làm điều này:

paint-order: stroke;

… Sau đó strokesẽ được sơn đầu tiên, tiếp theo là các giá trị khác theo thứ tự mặc định của chúng. Xem xét điều đó, ví dụ này giống như sau:

Này về cơ bản có nghĩa là bất động sản hoặc chấp nhận một giá trị normalhoặc kết hợp fill, strokevà markerstheo thứ tự chúng nên được sơn.

paint-order: stroke fill markers

Và điều gì sẽ xảy ra nếu không có giá trị hoặc giá trị không hợp lệ được cung cấp? Thứ tự mặc định sẽ được sử dụng: tô màu, nét vẽ, điểm đánh dấu.

Hỗ trợ trình duyệt

I E Cạnh Firefox Trình duyệt Chrome Safari Opera
Không 17+ 60+ 35+ 8+ 22+
Chrome dành cho Android Android Firefox Trình duyệt Android iOS Safari Opera Mini
85+ 79+ 81+ 8+ Tất cả
Nguồn: caniuse

đọc thêm

  • Đồ họa vectơ có thể mở rộng (SVG) Đặc điểm kỹ thuật cấp 2 (Đề xuất ứng viên)