CSS paint-order गुण

विवरण और उपयोग

paint-order गुण एसवीजी एलीमेंट या टेक्स्ट के ड्राइंग क्रम को निर्दिष्ट करता है。

ध्यान दें:टेक्स्ट एलीमेंट के लिए केवल स्ट्रोक (stroke) और फिल (fill) के क्रम को बदल सकते हैं क्योंकि मार्कर (markers) लागू नहीं होते हैं。

उदाहरण

उदाहरण 1

SVG <circle> एलीमेंट के ड्राइंग क्रम को बदलें:

circle {
  paint-order: stroke fill;
}

अपने आप प्रयास करें

उदाहरण 2

SVG <text> एलीमेंट के ड्राइंग क्रम को रंगबीर स्केल फिल से बदलें:

text {
  paint-order: stroke fill;
}

अपने आप प्रयास करें

CSS व्याकरण

paint-order: सामान्य|एक मान|दो मान|तीन मान|इनिशियल|विरासत|;

गुण मान

मान वर्णन
सामान्य डिफ़ॉल्ट मान। ड्राइंग क्रम फिल, स्ट्रोक, मार्कर होगा。
एक मान

ड्राइंग दिए गए मान से शुरू होगी और फिर मूल श्रेणी के अनुसार बाकी ड्राइंग को जारी रखेगी。

यदि केवल "stroke" निर्दिष्ट किया गया है, तो अगली ड्राइंग गतिविधि फिल (fill) होगी और फिर मार्कर (markers) होगा。

दो मान

ड्राइंग दिए गए मान से शुरू होगी और फिर मूल श्रेणी के अनुसार बाकी ड्राइंग को जारी रखेगी。

यदि "stroke markers" निर्दिष्ट किया गया है, तो अगली ड्राइंग गतिविधि फिल (fill) होगी。

तीन मान ड्राइंग दिए गए मान के अनुसार करेगी。
इनिशियल इस गुण को उसके डिफ़ॉल्ट मान पर सेट करें। देखें इनिशियल.
विरासत इस गुण को उसके पिता एलीमेंट से विरासत करें। देखें विरासत.

तकनीकी विवरण

डिफ़ॉल्ट मान: सामान्य
विरासतशीलता: हाँ
एनिमेशन निर्माण: समर्थित नहीं है। देखें:एनिमेशन संबंधी गुण.
संस्करण: CSS3
जेसक्रिप्ट संग्रह object.style.paintOrder="stroke fill"

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

च्रोम एज फायरफॉक्स सफारी ओपेरा
35.0 17.0 60.0 8.0 22.0

संबंधित पृष्ठ

ट्यूटोरियल:SVG ट्यूटोरियल

ट्यूटोरियल:HTML SVG ग्राफिक्स