Zamówienie farby - CSS-Tricks

Właściwość CSS paint-orderokreśla kolejność rysowania kształtów SVG i tekstu, w tym wypełnienie, obrys i wszelkie używane znaczniki. Domyślnie te atrybuty są rysowane w tej samej kolejności: wypełnienie, obrys i znaczniki. Ta właściwość pozwala nam ją przełączać, dzięki czemu mamy większą kontrolę nad wynikowym wyglądem.

Ta właściwość naprawdę wyróżnia się w przypadku tekstu SVG, zwłaszcza elementu, który ma zarówno wypełnienie, jak i obrys. Lubię to:

Ugh, ten cios jest straszny. Ma tylko 6 pikseli szerokości, ale trochę zakrywa wypełnienie. Dzieje się tak, ponieważ domyślnie najpierw maluje się wypełnienie, a następnie obrys. Ale jeśli odwrócimy to za pomocą paint-orderwłaściwości, wypełnienie zostanie pomalowane jako ostatnie i zakryje nieestetyczne części obrysu.

O Boże, to o wiele lepsze! Właściwie możemy czytać tekst, a obrys jest bardziej zgodny z kształtem znaków niż wcześniej.

Składnia

paint-order: normal | ( fill || stroke || markers )

Wartość początkowa: normal
Dotyczy: kształtów i elementów zawartości tekstowej
Odziedziczone: tak
Typ animacji: dyskretna

Wartości

/* 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;

Warto zauważyć, że przekazanie jednej wartości jest całkowicie uzasadnione. Na przykład, jeśli zrobiliśmy to:

paint-order: stroke;

… strokeNajpierw zostaną namalowane obrazy, a następnie pozostałe wartości w ich domyślnej kolejności. Biorąc to pod uwagę, ten przykład jest następujący:

To w zasadzie oznacza, że nieruchomość albo przyjmuje wartość normallub ich kombinacji fill, strokea markersw kolejności powinny być pomalowane.

paint-order: stroke fill markers

A co się stanie, jeśli nie zostanie podana żadna wartość lub jest ona nieprawidłowa? Zostanie użyta domyślna kolejność: wypełnienie, obrys, znaczniki.