paint-order

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 to stroke 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:

An image showing how the paint-order example looks in a UA that supports the paint-order property.

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
paint-orderChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown