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