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.
paint-order: normal | [ fill || stroke || markers ]
- Initial value:
- Applies to: shapes and text content elements
- Inherited: yes
- Animation type: discrete
/* 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:
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
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.
|Android Chrome||Android Firefox||Android Browser||iOS Safari||Opera Mini|
- Scalable Vector Graphics (SVG) Level 2 Specification (Candidate Recommendation)