Thuộc tính thứ tự sơn CSS
Ví dụ
Thay đổi thứ tự vẽ cho phần tử SVG <circle>:
circle {
paint-order: stroke fill;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính paint-order
chỉ định thứ tự cách vẽ phần tử hoặc văn bản SVG.
Lưu ý: Chỉ có thể thay đổi thứ tự nét và tô cho các thành phần văn bản, vì các điểm đánh dấu không áp dụng được.
Giá trị mặc định: | Bình thường |
---|---|
Thừa hưởng: | Đúng |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.paintOrder="Nét tô đầy" Hãy thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
paint-order | 35.0 | 17.0 | 60.0 | 8.0 | 22.0 |
Cú pháp CSS
paint-order: normal| one value | two values | three values |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
normal | Default value. The paint order is fill, stroke, markers. | Demo ❯ |
one value | Painting will start with given value, then continue with the remaining painting in default order. If only "stroke" is given, the next painting activity is fill, then markers. | Demo ❯ |
two values | Painting will start with given values, then continue with the remaining painting in default order. If "stroke markers" are given, the next painting activity will be fill. | Demo ❯ |
three values | Painting will be done according to given values. | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Thay đổi thứ tự vẽ trên phần tử SVG <text> với màu tô chuyển màu cầu vồng:
text {
paint-order: stroke fill;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn SVG: Hướng dẫn SVG
Đồ họa HTML SVG: Đồ họa HTML SVG