CSS paint-order property

Definition and Usage

paint-order This attribute specifies the drawing order of SVG elements or text.

Note:For text elements, you can only change the order of stroke (stroke) and fill (fill), because markers are not applicable.

Example

Example 1

Change the drawing order of the SVG <circle> element:

circle {
  paint-order: stroke fill;
}

Try It Yourself

Example 2

Change the drawing order of the SVG <text> element with rainbow gradient fill:

text {
  paint-order: stroke fill;
}

Try It Yourself

CSS Syntax

paint-order: normal|one value|two values|three values|initial|inherit;

Attribute Value

Value Description
normal Default Value. The drawing order is fill, stroke, markers.
one value

The drawing will start from the given value and then continue drawing the remaining part in the default order.

If only "stroke" is specified, the next drawing activity is fill (fill), followed by markers.
two values

The drawing will start from the given value and then continue drawing the remaining part in the default order.

If "stroke markers" is specified, the next drawing activity will be fill (fill).
three values The drawing will be performed according to the given value.
initial Sets this property to its default value. See: initial.
inherit Inherits this property from its parent element. See: inherit.

Technical Details

Default Value: normal
Inheritance: yes
Animation Creation: Not supported. Please refer to:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.paintOrder="stroke fill"

Browser Support

The numbers in the table indicate the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
35.0 17.0 60.0 8.0 22.0

Related Page

Tutorial:SVG Tutorial

Tutorial:HTML SVG Graphics