The paint-order
attribute specifies the order that the fill, stroke, and markers of a given shape or text element are painted.
Note: As a presentation attribute, paint-order
can be used as a CSS property.
As a presentation attribute, it can be applied to any element but it has effect only on the following ten elements: <circle>
, <ellipse>
, <line>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, and <tspan>
Usage notes
Value | normal | [ fill || stroke || markers ] |
---|---|
Default value | normal |
Animatable | Yes |
- normal
- This value indicates that the fill will be painted first, then the stroke, and finally the markers.
- [ fill || stroke || markers ]
- The order of these three keywords indicates the order in which the painting happens, from left to right. If any of the three painting components is omitted, they will be painted in their default order after the specified components. For example, using
stroke
is equivalent tostroke fill markers
.
Example
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <linearGradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </linearGradient> <rect width="400" height="200" fill="url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-size="50px" font-weight="bold"> <text x="200" y="75">stroke over</text> <text x="200" y="150" paint-order="stroke" id="stroke-under">stroke under</text> </g> </svg>
The example would be rendered as follows:
The stroke under effect could be achieved via the following CSS property:
#stroke-under { paint-order: stroke; }
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'paint-order' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
paint-order | Chrome Full support Yes | Edge Full support ≤79 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown