paint-order
Misol
SVG <circle> elementi uchun chizish tartibini o‘zgartiring:
circle {
paint-order: stroke fill;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
paint-order xususiyati SVG elementi yoki matn qanday tartibda chizilishini belgilaydi.
Eslatma: Matn elementlari uchun faqat stroke (kontur) va fill (to‘ldirish) tartibini o‘zgartirish mumkin, chunki markerlar ularga qo‘llanilmaydi.
| Standart qiymat: | normal |
|---|---|
| Meros qilinadi: | ha |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.paintOrder="stroke fill" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| paint-order | 35.0 | 17.0 | 60.0 | 8.0 | 22.0 |
CSS sintaksisi
paint-order: normal|bitta qiymat|ikkita qiymat|uchta qiymat|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| normal | Standart qiymat. Chizish tartibi: fill, stroke, markers. | Demo ❯ |
| bitta qiymat | Chizish berilgan qiymatdan boshlanadi, so‘ngra qolgan chizish amallari standart tartibda davom etadi. Agar faqat "stroke" berilsa, keyingi chizish amali fill, undan keyin markers bo‘ladi. | Demo ❯ |
| ikkita qiymat | Chizish berilgan qiymatlardan boshlanadi, so‘ngra qolgan chizish amallari standart tartibda davom etadi. Agar "stroke markers" berilsa, keyingi chizish amali fill bo‘ladi. | Demo ❯ |
| uchta qiymat | Chizish berilgan qiymatlarga muvofiq bajariladi. | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Kamalak gradient bilan to‘ldirilgan SVG <text> elementida chizish tartibini o‘zgartiring:
text {
paint-order: stroke fill;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
SVG darsligi: SVG darsligi
HTML SVG grafikasi: HTML SVG grafikasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!