語法
css
/* Normal */
paint-order: normal;
/* Single values */
paint-order: stroke; /* draw the stroke first, then fill and markers */
paint-order: markers; /* draw the markers first, then fill and stroke */
/* Multiple values */
paint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */
paint-order: markers stroke fill; /* draw markers, then stroke, then fill */
/* Global values */
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: revert-layer;
paint-order: unset;
如果未指定任何值，則預設的繪製順序是 fill、stroke、markers。
當指定一個值時，該值首先被繪製，然後是另外兩個值按照它們預設的相對順序繪製。當指定兩個值時，它們將按照指定的順序繪製，然後是未指定的值。
注意： 對於此屬性，標記僅適用於涉及使用 marker-* 屬性（例如 marker-start）和 <marker> 元素繪製 SVG 形狀的情況。它們不適用於 HTML 文字，因此在這種情況下，您只能確定 stroke 和 fill 的順序。
值
normal-
按照正常的繪製順序繪製不同的專案。
stroke、fill、markers-
按照您希望它們被繪製的順序指定部分或所有這些值。
正式定義
正式語法
paint-order =
normal |
[ fill || stroke || markers ]
示例
反轉描邊和填充的繪製順序
SVG
html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
<text x="10" y="75">stroke in front</text>
<text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>
CSS
css
text {
font-family: sans-serif;
font-size: 50px;
font-weight: bold;
fill: black;
stroke: red;
stroke-width: 4px;
}
.stroke-behind {
paint-order: stroke fill;
}
結果
使用 HTML 反轉描邊和填充的繪製順序
要在 HTML 中控制填充和描邊的順序，您可以使用 -webkit-text-stroke-color 和 -webkit-text-stroke-width CSS 屬性。
HTML
html
<div>stroke in front</div>
<div class="stroke-behind">stroke behind</div>
CSS
css
div {
font-family: sans-serif;
font-size: 50px;
font-weight: bold;
fill: black;
padding-top: 10px;
padding-bottom: 10px;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 4px;
}
.stroke-behind {
paint-order: stroke fill;
}
結果
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # PaintOrderProperty |
瀏覽器相容性
載入中…