इनलाइन एसवीजी को इस अर्थ में "स्टाइल" किया जा सकता है कि इसमें पहले से ही भरता है और स्ट्रोक करता है और दूसरा जिसे आप पृष्ठ पर डालते हैं। यह भयानक और इनलाइन SVG का उपयोग करने के लिए एक पूरी तरह से ठीक तरीका है। लेकिन आप एसवीजी को सीएसएस के माध्यम से इनलाइन भी स्टाइल कर सकते हैं, जो थोड़े भयानक है क्योंकि, मैं हम में से बहुत से लोगों के लिए कल्पना करता हूं, सीएसएस वह जगह है जहां हम शक्तिशाली और आरामदायक महसूस करते हैं।
यह बहुत काम करता है कि आप कैसे उम्मीद करेंगे। यहाँ एक सरल उदाहरण है:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )सीएसएस में थोड़ा "अधिक शक्ति" है, आप स्वयं एसवीजी तत्वों पर शैली विशेषताओं की तुलना में कह सकते हैं। अगर उस पर यह पसंद था fill="red", तो सीएसएस अभी भी "जीत" करेगा। आप इसके विपरीत सोच सकते हैं क्योंकि ऐसा लगता है कि स्टाइल विशेषताएँ इनलाइन शैलियों की तरह शक्तिशाली होंगी, लेकिन वे नहीं हैं। इनलाइन शैलियों रहे हैं अभी भी शक्तिशाली हालांकि।
इसी तरह, सीएसएस के नियमों में कमी नहीं आती है यदि कुछ और विशिष्ट हो रहा है। उदाहरण के लिए:
.parent ( fill: red; )सीएसएस इस मामले में हार जाता है, क्योंकि नीले रंग को विशेष रूप से रेक्ट पर लागू किया जा रहा है।
अगर मैं सीएसएस के माध्यम से एसवीजी को स्टाइल करने की योजना बना रहा हूं, तो मुझे आमतौर पर एसवीजी तत्वों को पूरी तरह से स्टाइल की विशेषताओं को छोड़ना आसान लगता है।
अलर्ट जानने के लिए महत्वपूर्ण बात!
हमने बात करते हुए समय बिताया है । कहो कि यह स्थिति है:
अंततः उस "बच्चे" को उस "माता-पिता" में डाल दिया जाता है? सही। तो यह काम करना चाहिए?
.parent .child ( fill: red; )लेकिन ऐसा नहीं है।
यह जिस तरह से काम करता है, यह क्लोन करता है और इसे उस दूसरे एसवीजी में "शैडो डोम" में डाल देता है। आप उस छाया डोम के माध्यम से उस तरह के चयनकर्ता के साथ प्रवेश नहीं कर सकते। बस काम नहीं करता है। शायद किसी दिन एक समाधान होगा, लेकिन अभी नहीं है।
आप ऐसा कर सकते हैं:
.parent ( fill: red; )और यह भरने के माध्यम से झरना और बाल तत्वों को प्रभावित करेगा अगर रास्ते में अधिक विशिष्ट कुछ भी नहीं है। या
.child ( fill: red; )और उस बच्चे के सभी उदाहरणों को प्रभावित करते हैं। लेकिन सिर्फ दोनों नहीं।
अगर आपको एक ही चीज़ के अलग-अलग स्टाइल वाले संस्करणों की ज़रूरत है ...
बस या आप की जरूरत है जो कुछ भी नकल । जानकारी का विशाल बहुमत समान होगा, और GZip नाश्ते के लिए समान पाठ खाते हैं।