पेंट-ऑर्डर - सीएसएस-ट्रिक्स

CSS paint-orderप्रॉपर्टी उस क्रम को सेट करती है, जिसमें SVG शेप और टेक्स्ट खींचे जाते हैं, जिसमें फिल, स्ट्रोक और कोई भी मार्कर शामिल होता है जो उपयोग में हो सकता है। डिफ़ॉल्ट रूप से, उन विशेषताओं को उसी क्रम में तैयार किया जाता है: भरण, स्ट्रोक और मार्कर। यह संपत्ति हमें इसे स्विच करने की अनुमति देती है ताकि परिणामस्वरूप परिणाम पर हमारा अधिक नियंत्रण हो।

जहां यह संपत्ति वास्तव में चमकती है वह एसवीजी पाठ के साथ है, विशेष रूप से ऐसा तत्व जिसमें भरण और आघात दोनों होते हैं। इस कदर:

उह, यह आघात भारी है। यह केवल 6px चौड़ा है, लेकिन यह सॉर्ट फिल को कवर करता है। ऐसा इसलिए है क्योंकि पहले रंग को डिफ़ॉल्ट रूप से चित्रित किया जाता है, इसके बाद स्ट्रोक होता है। लेकिन अगर हम रिवर्स का उपयोग करते paint-orderहैं कि संपत्ति का उपयोग करते हैं, तो भरने को अंतिम रूप से चित्रित किया जाता है और स्ट्रोक के भद्दा भागों को कवर करता है।

हे भगवान, यह बहुत बेहतर है! हम वास्तव में पाठ पढ़ सकते हैं और स्ट्रोक पहले की तुलना में पात्रों के आकार के बराबर है।

वाक्य - विन्यास

paint-order: normal | ( fill || stroke || markers )

प्रारंभिक मूल्य: normal
इस पर लागू होता है: आकार और पाठ सामग्री तत्व
इन्हेरिटेड: हाँ
एनिमेशन प्रकार: असतत

मूल्यों

/* Normal */ paint-order: normal; /* Single values */ paint-order: stroke; /* same as: stroke fill markers */ paint-order: markers; /* same as: markers fill stroke */ /* Multiple values */ paint-order: stroke fill; /* same as: stroke fill markers */ paint-order: markers stroke fill;

यह ध्यान देने योग्य है कि एक मूल्य पास करना पूरी तरह से कानूनी है। उदाहरण के लिए, यदि हमने ऐसा किया है:

paint-order: stroke;

... तो strokeपहले पेंट किया जाएगा, उसके बाद उनके डिफ़ॉल्ट क्रम में अन्य मान। इसे ध्यान में रखते हुए, यह उदाहरण निम्नलिखित के बराबर है:

इसका मूल रूप से मतलब यह है कि संपत्ति या तो के मूल्य normalया संयोजन को स्वीकार करती है fill, strokeऔर markersक्रम में उन्हें चित्रित किया जाना चाहिए।