paint-order
Baseline
2024
Newly available
Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Thuộc tính paint-order CSS cho phép bạn kiểm soát thứ tự vẽ phần tô màu và nét vẽ (cùng với các marker) của nội dung văn bản và hình dạng.
Cú pháp
/* Bình thường */
paint-order: normal;
/* Giá trị đơn */
paint-order: stroke; /* vẽ nét trước, sau đó tô màu và marker */
paint-order: markers; /* vẽ marker trước, sau đó tô màu và nét */
/* Nhiều giá trị */
paint-order: stroke fill; /* vẽ nét trước, rồi tô màu, rồi marker */
paint-order: markers stroke fill; /* vẽ marker, rồi nét, rồi tô màu */
/* Giá trị toàn cục */
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: revert-layer;
paint-order: unset;
Nếu không chỉ định giá trị nào, thứ tự vẽ mặc định là fill, stroke, markers.
Khi chỉ định một giá trị, giá trị đó được vẽ trước, tiếp theo là hai giá trị còn lại theo thứ tự mặc định tương đối. Khi chỉ định hai giá trị, chúng sẽ được vẽ theo thứ tự chỉ định, tiếp theo là giá trị chưa được chỉ định.
Note:
Trong trường hợp thuộc tính này, các marker chỉ phù hợp khi vẽ các hình dạng SVG liên quan đến việc sử dụng các thuộc tính marker-* (ví dụ: marker-start) và phần tử <marker>. Chúng không áp dụng cho văn bản HTML, vì vậy trong trường hợp đó, bạn chỉ có thể xác định thứ tự của stroke và fill.
Giá trị
normal-
Vẽ các mục khác nhau theo thứ tự vẽ bình thường.
stroke,fill,markers-
Chỉ định một số hoặc tất cả các giá trị này theo thứ tự bạn muốn chúng được vẽ.
Định nghĩa hình thức
| Initial value | normal |
|---|---|
| Applies to | text elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
paint-order =
normal |
[ fill || stroke || markers ]
Ví dụ
Đảo ngược thứ tự vẽ nét và tô màu
SVG
<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
text {
font-family: sans-serif;
font-size: 50px;
font-weight: bold;
fill: black;
stroke: red;
stroke-width: 4px;
}
.stroke-behind {
paint-order: stroke fill;
}
Kết quả
Đảo ngược thứ tự vẽ nét và tô màu bằng HTML
Để kiểm soát thứ tự tô màu và nét trong HTML, bạn có thể sử dụng các thuộc tính CSS -webkit-text-stroke-color và -webkit-text-stroke-width.
HTML
<div>stroke in front</div>
<div class="stroke-behind">stroke behind</div>
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;
}
Kết quả
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2 # PaintOrderProperty |