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 markersAnd 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
Further reading
- Scalable Vector Graphics (SVG) Level 2 Specification (Candidate Recommendation)
