paint-order

Die CSS-Eigenschaft paint-order legt die Reihenfolge fest, in der SVG-Formen und Text gezeichnet werden, einschließlich der Füllung, des Strichs und aller möglicherweise verwendeten Marker. Standardmäßig werden diese Attribute in dieser Reihenfolge gezeichnet: Füllung, Strich und Marker. Diese Eigenschaft ermöglicht es uns, dies zu ändern, um mehr Kontrolle über das resultierende Erscheinungsbild zu haben.

Wo diese Eigenschaft wirklich glänzt, ist bei SVG-Text, insbesondere bei einem <text>-Element, das sowohl eine Füllung als auch einen Strich hat. Wie hier

Igitt, dieser Strich ist hässlich. Er ist nur 6 Pixel breit, aber er überdeckt irgendwie die Füllung. Das liegt daran, dass die Füllung standardmäßig zuerst gemalt wird, gefolgt vom Strich. Aber wenn wir das mit der paint-order-Eigenschaft umkehren, wird die Füllung zuletzt gemalt 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 besser der Form der Zeichen als zuvor.

Syntax

paint-order: normal | [ fill || stroke || markers ]

• Anfangswert: normal
• Gilt für: Formen und Textelemente
• Vererbt: 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 zulässig ist, einen einzigen Wert zu übergeben. Wenn wir zum Beispiel dies tun würden

paint-order: stroke;

...dann wird der stroke zuerst gezeichnet, gefolgt von den anderen Werten in ihrer Standardreihenfolge. In Anbetracht dessen ist dieses Beispiel gleichbedeutend mit folgendem

Das bedeutet im Grunde, dass die Eigenschaft entweder einen Wert von normal oder eine Kombination aus fill, stroke und markers in der Reihenfolge akzeptiert, in der sie gemalt werden sollen.

paint-order: stroke fill markers

Und was passiert, wenn kein Wert oder ein ungültiger Wert angegeben wird? Es wird die Standardreihenfolge verwendet: Füllung, Strich, Marker.

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	17+	60+	35+	8+	22+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
85+	79+	81+	8+	Alle

Verwandte Eigenschaften

• fill
• stroke
• stroke-width

Weitere Lektüre

• Scalable Vector Graphics (SVG) Level 2 Specification (Candidate Recommendation)