एसवीजी रेंडर करने योग्य तत्वों के साथ CSS3 स्यूडोक्लास की संगतता क्या है?

Question

मैं एसवीजी सीख रहा हूं और this informative article पर आया हूं। लेखक बताते हैं कि

अधिकांश सीएसएस चयनकर्ताओं का उपयोग एसवीजी तत्वों का चयन करने के लिए किया जा सकता है। सामान्य प्रकार, कक्षा और आईडी चयनकर्ताओं के अलावा, एसवीजी को सीएसएस 2 के गतिशील छद्म-वर्गों (: होवर, सक्रिय और फोकस) और छद्म वर्ग (: पहला बच्चा,: दौरा किया गया: लिंक और: लैंग का उपयोग करके स्टाइल किया जा सकता है) शेष सीएसएस 2 छद्म वर्ग, जिसमें जेनरेट की गई सामग्री (जैसे :: पहले और :: के बाद) शामिल हैं, एसवीजी भाषा परिभाषा का हिस्सा नहीं हैं और इसलिए, एसवीजी की शैली पर कोई प्रभाव नहीं पड़ता है।

इस लेखक वेब पर कई लेख है और बहुत जानकार प्रतीत होता है। हालांकि, बयान "शेष सीएसएस 2 pseudoclasses .... SVGs की शैली पर कोई प्रभाव नहीं" CSS3 pseudoclasses के बारे में एक आश्चर्य बनाता है। लो यह उदाहरण मैंने कोडपेन (ब्राउज़र के रूप में एफएफ) पर उत्पन्न किया।

<svg width="220" height="220" xmlns="http://www.w3.org/2000/svg"> 
    <rect x="10" y="10" width="100" height="100" /> 
    <rect x="110" y="110" width="100" height="100" /> 
</svg> 

<style> 
    svg { border: 3px dashed #999 } 
    svg > rect:hover { fill: green } 
    rect:nth-child(even) { fill:red } 
</style> 

CSS3 : nth-child छद्मक्लस यहां पूरी तरह से ठीक काम करता है (दूसरे आयताकार लाल भरता है)। एक और उदाहरण: ऊपर एक और CSS3 के pseudoclass चयनकर्ता के साथ एक वें वाले बच्चे नियम,: स्थानापन्न नहीं नियम (और सब एक ही रहता है):

rect:not([x="110"]) { fill:red } // fills the 1st rectangle red 

मैं this reference पाया है लेकिन यह मेरी मदद नहीं करता है ।

एसवीजी तत्वों के साथ CSS3 छद्मक्लूस की संगतता क्या है?

नोट: मैं इन pseudoclass नियम संभालने हूँ केवल एसवीजी renderable elements पर लागू होगा।

Answer 1

यहाँ एक pen कि एसवीजी renderable तत्वों को fill या stroke गुण लगाने से SVGs पर CSS3 के छद्म वर्ग चयनकर्ता (@andrewli द्वारा उल्लिखित) की पूरी सूची के आवेदन को दर्शाता है है।

<svg width="450" height="300"> 
    <g transform="translate(5,5)"> 
    <rect x="0" y="0" width="25" height="25" /> 
    <rect x="0" y="40" width="25" height="25" /> 
    <rect x="0" y="80" width="25" height="25" /> 
    <circle cx="15" cy="132" r="13.5"/> 
    <circle cx="15" cy="170" r="13.5"/> 
    <polygon points="2,200 28,200 14,225"/> 
    <rect x="0" y="240" width="25" height="25" /> 
    </g> 
    <g transform="translate(5,5)"> 
    <rect x="220" y="0" width="25" height="25" /> 
    </g> 
    <g transform="translate(5,5)" font-family="Verdana" font-size="16" fill="#444"> 
    <text x="40" y="20" >:root</text> 
    <text x="40" y="60">:nth-child(2)</text> 
    <text x="40" y="100">:nth-of-type(3)</text> 
    <text x="40" y="140">:first-of-type</text> 
    <text x="40" y="180">:nth-last-of-type(1)</text> 
    <text x="40" y="220">:only-of-type, :last-of-type</text> 
    <text x="40" y="260">:nth-last-child(1), :last-child</text> 
    <text x="260" y="20">:only-child, :last-child</text> 
    </g> 
</svg> 

:

मैं आदेश सभी छद्म वर्गों है कि बच्चों के विभिन्न प्रकार का चयन में फिट करने में दो अलग अलग समूह (दो माता पिता तत्वों, दो स्तंभों के रूप में कलम में दिखाया गया है) में अलग एसवीजी तत्वों परिभाषित

दिलचस्प निष्कर्ष:

• :root काम करने के लिए प्रकट होता है। जैसा कि अपेक्षित है, यह दस्तावेज़ में svg तत्वों सहित सभी तत्वों पर लागू होता है।
• :empty के बाद से सभी void svg तत्वों, (<rect>, <circle>, <ellipse>, <polygon>, आदि) के लिए आवेदन किया जाता है, यह एसवीजी आकार तत्वों को निशाना बनाने के लिए एक उपयोगी चयनकर्ता है।

Answer 2

निम्नलिखित के रूप में Selectors Level 3 Editor's Draft, जहां साथ लोगों को बोल्ड links लोगों एसवीजी के साथ संगत कर रहे हैं के रूप में परिभाषित CSS3 के छद्म वर्ग चयनकर्ता की पूरी सूची इस प्रकार हैं:

• :target, तत्वों है कि लक्षित कर रहे हैं का चयन करता है टुकड़ा पहचानकर्ता
• :root के माध्यम से,, दस्तावेज है, जो html टैग है की जड़ का चयन करता है higher specificity
साथ 0
• :nth-child(an+b), तत्व दस्तावेज़ पेड़
• :nth-of-type(an+b) में यह पहले an+b-1 भाई बहन है कि चयन करता है, तत्व an+b-1 भाई बहन
• :nth-last-of-type(an+b) दस्तावेज़ पेड़ में एक ही तत्व नाम के साथ यह पहले किया है कि चयन करता है, चयन तत्व दस्तावेज़ पेड़
• :last-child में एक ही तत्व नाम के साथ यह बाद an+b-1 भाई बहन है, किसी भी तत्व का चयन करता है कि मैं s अपनी मूल
• :first-of-type के अंतिम बच्चे, माता-पिता के बच्चों
• :last-of-type का अपनी तरह का पहला भाई चयन करता है, माता पिता के बच्चों
• :only-child का अपनी तरह का पिछले भाई चयन करता है, उस तत्व का चयन करता है जिसमें कोई अन्य तत्व नहीं है जिसमें
• :only-of-type, उस तत्व का चयन करता है जिसमें मूल तत्व है जिसमें कोई अन्य बच्चा नहीं है एक ही तत्व नाम
• :empty, तत्व सभी
• :not(X) में कोई बच्चे हैं कि चयन करता है, तत्व है कि चयनकर्ता X द्वारा चयनित नहीं है, जो एक simple selector

ये परिभाषित किया गया है, लेकिन है का चयन करता है मसौदे में अर्थपूर्ण अर्थ के बिना:

• :enabled
• :disabled
• :checked
• :indeterminate

ऊपर HTML5 Specification में अर्थ दिया जाता है, अन्य छद्म वर्गों के लिए कुछ अन्य परिभाषाओं के साथ।

संक्षेप में, यह :root को छोड़कर सभी CSS3 छद्म-वर्गों के काम की तरह लगता है। आप MDN documentation for pseudo-classes पर और पढ़ सकते हैं।मुझे संगतता का वर्णन करने वाला एक विश्वसनीय संसाधन नहीं मिला, इसलिए यह सब परीक्षण के माध्यम से निर्धारित किया गया था। CSS3 में परिभाषित कोई अन्य छद्म-वर्ग या छद्म-तत्व नहीं हैं।