CSS paint-order 属性

定義と用法

paint-order 属性はSVG要素やテキストの描画順序を指定します。

注意：テキスト要素の場合、マーカー（markers）が適用されないため、描画（stroke）と塗りつぶし（fill）の順序のみを変更できます。

SVG <circle>要素の描画順序を変更します：

circle {
  paint-order: stroke fill;
}

彩虹のグラデーションで塗りつぶしたSVG <text>要素の描画順序を変更します：

text {
  paint-order: stroke fill;
}

paint-order: normal|一つの値|二つの値|三つの値|initial|inherit;

値	説明
normal	デフォルト値。描画順序は塗りつぶし、縁取り、マーカーです。
一つの値	描画は指定された値から始まり、その後デフォルトの順序で残りの部分を描画し続けます。「stroke」のみ指定された場合、次の描画アクションは塗りつぶし（fill）で、その後マーカー（markers）です。
二つの値	描画は指定された値から始まり、その後デフォルトの順序で残りの部分を描画し続けます。「stroke markers」が指定された場合、次の描画アクションは塗りつぶし（fill）です。
三つの値	描画は指定された値に従って行われます。
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