paint-order

The CSS paint-order property sets the order that SVG shapes and text are drawn, including the fill, stroke, and any markers that might be in use. By default, those attributes are drawn in that very order: fill, stroke, and markers. This property allows us to switch it up so we have more control over the resulting appearance.

Where this property really shines is with SVG text, particularly a <text> element that has both a fill and a stroke. Like this:

Ugh, that stroke is gnarly. It’s only 6px wide, but it sorta covers the fill. That’s because the fill is painted first, by default, followed by the stroke. But if we reverse that using the paint-order property, the fill gets painted last and covers the unsightly portions of the stroke.

Oh gosh, that’s so much better! We can actually read the text and the stroke is truer to the shape of the characters than before.

Syntax

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

• Initial value: normal
• Applies to: shapes and text content elements
• Inherited: yes
• Animation type: discrete

Values

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

It’s worth noting that it’s totally legit to pass one value. For example, if we did this:

paint-order: stroke;

…then the stroke will be painted first, followed by the other values in their default order. Taking that into consideration, this example is equal to the following:

This basically means that the property either accepts a value of normal or a combination of fill, stroke and markers in the order they should be painted.

paint-order: stroke fill markers

And what happens if no value or an invalid one is provided? The default order will be used: fill, stroke, markers.

Browser support

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

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

Related properties

• fill
• stroke
• stroke-width

Further reading

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