CSS paint-order 属性

定义和用法

paint-order 属性指定 SVG 元素或文本的绘制顺序。

注意：对于文本元素，只能更改描边（stroke）和填充（fill）的顺序，因为标记（markers）不适用。

更改 SVG <circle> 元素的绘制顺序：

circle {
  paint-order: stroke fill;
}

更改带有彩虹渐变填充的 SVG <text> 元素的绘制顺序：

text {
  paint-order: stroke fill;
}

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

值	描述
normal	默认值。绘制顺序为填充、描边、标记。
one value	绘制将从给定值开始，然后按默认顺序继续绘制剩余部分。如果仅指定 "stroke"，则下一个绘制活动是填充（fill），然后是标记（markers）。
two values	绘制将从给定值开始，然后按默认顺序继续绘制剩余部分。如果指定 "stroke markers"，则下一个绘制活动将是填充（fill）。
three values	绘制将按照给定的值进行。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

默认值：	normal
继承性：	yes
动画制作：	不支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.paintOrder="stroke fill"

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome	Edge	Firefox	Safari	Opera
35.0	17.0	60.0	8.0	22.0