Lackierreihenfolge - CSS-Tricks

Die CSS- paint-orderEigenschaft legt die Reihenfolge fest, in der SVG-Formen und -Text gezeichnet werden, einschließlich Füllung, Strich und eventuell verwendeter Markierungen. Standardmäßig werden diese Attribute in genau dieser Reihenfolge gezeichnet: Füllung, Strich und Markierungen. Mit dieser Eigenschaft können wir sie hochschalten, um mehr Kontrolle über das resultierende Erscheinungsbild zu haben.

Wo diese Eigenschaft wirklich glänzt, ist SVG-Text, insbesondere ein Element, das sowohl eine Füllung als auch einen Strich hat. So was:

Ugh, dieser Schlaganfall ist knorrig. Es ist nur 6px breit, aber es deckt irgendwie die Füllung ab. Dies liegt daran, dass die Füllung standardmäßig zuerst gezeichnet wird, gefolgt vom Strich. Wenn wir dies jedoch mithilfe der paint-orderEigenschaft umkehren, wird die Füllung zuletzt gezeichnet und deckt die unschönen Teile des Strichs ab.

Oh Gott, das ist so viel besser! Wir können den Text tatsächlich lesen und der Strich entspricht mehr der Form der Zeichen als zuvor.

Syntax

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

Ursprünglicher Wert: normal
Gilt für: Formen und Textinhaltselemente
Geerbt: ja
Animationstyp: diskret

Werte

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

Es ist erwähnenswert, dass es absolut legitim ist, einen Wert zu übergeben. Wenn wir das zum Beispiel getan haben:

paint-order: stroke;

… Dann strokewird das zuerst gemalt, gefolgt von den anderen Werten in ihrer Standardreihenfolge. In Anbetracht dessen entspricht dieses Beispiel dem folgenden:

Dies bedeutet im Grunde, dass die Eigenschaft entweder einen Wert von normaloder eine Kombination von akzeptiert und in der Reihenfolge fill, in der sie gemalt werden sollen.strokemarkers