CSS के साथ स्टाइलिंग स्केलेबल वेक्टर ग्राफिक (SVG)
आज हम स्केलेबल वेक्टर ग्राफिक (एसवीजी) पर अपनी चर्चा जारी रखने जा रहे हैं, और जैसा कि हमने अपनी पिछली पोस्ट में बताया है, एसवीजी का उपयोग करने का एक फायदा यह है कि इसे सीएसएस के साथ स्टाइल किया जा सकता है।.
एसवीजी स्टाइलिंग गुण
स्टाइलिंग एसवीजी मूल रूप से नियमित HTML तत्वों की तरह काम करते हैं, उन्होंने वास्तव में कुछ सामान्य गुणों को भी साझा किया है। हालांकि, अन्य गुण हैं जो विशेष रूप से एसवीजी ऑब्जेक्ट के लिए अभिप्रेत हैं, जिनकी सीएसएस के अलावा अपने स्वयं के विनिर्देश हैं.
उदाहरण के लिए, नियमित रूप से HTML एलिमेंट में, हम या तो बैकग्राउंड कलर जोड़ सकते हैं पीछे का रंग या पृष्ठभूमि सीएसएस संपत्ति। एसवीजी में, यह थोड़ा अलग है; पृष्ठभूमि का रंग इसके साथ निर्दिष्ट होता है भरना इसके बजाय संपत्ति। इसके अलावा, तत्व की सीमा के साथ निर्दिष्ट किया गया है आघात संपत्ति और के साथ नहीं है सीमा जैसे हमने नियमित HTML में किया था, आप यहाँ पूरी सूची देख सकते हैं.
यदि आप एडोब इलस्ट्रेटर जैसे वेक्टर संपादक के साथ काम कर रहे हैं, तो आप जल्दी से अनुमान लगा सकते हैं कि एसवीजी में संपत्ति के नामकरण तंत्र की उत्पत्ति संपादक से हुई है.
एसवीजी स्टाइल कार्यान्वयन
हम एसवीजी तत्व को स्टाइल करने के लिए निम्न तरीकों में से एक का उपयोग कर सकते हैं;
प्रस्तुति गुण
यदि आपने सभी एसवीजी गुण सूची देखी है, तो उन सभी को तत्व की प्रस्तुति को बदलने के लिए सीधे तत्व पर जोड़ा जा सकता है। निम्नलिखित उदाहरण दिखाता है कि हम कैसे जोड़ सकते हैं भरना तथा आघात संपत्ति सीधे एक पर रेक्ट तत्व;
आयत नीचे स्क्रीनशॉट की तरह निकलेगी;
इनलाइन स्टाइल शीट
हम इसके साथ शैली भी जोड़ सकते हैं अंदाज विशेषता। निम्नलिखित उदाहरण में हम भी जोड़ेंगे भरना तथा आघात को रेक्ट, लेकिन इस बार हम इसे भीतर जोड़ते हैं अंदाज और इसे CSS3 के साथ घुमाएं परिवर्तन संपत्ति, जैसे;.
आयत उसी परिणाम में बदल जाएगी, केवल यह कि अब इसे भी घुमाया जाएगा;
आंतरिक शैली शीट
एसवीजी शैली को एंबेड करें अंदाज तत्व भी संभव है और यह अलग नहीं है कि हमने इसे नियमित HTML पर कैसे किया। नीचे दिए गए उदाहरण से पता चलता है कि हम एसवीजी तत्वों को प्रभावित करने के लिए आंतरिक शैलियों को कैसे जोड़ते हैं .एचटीएमएल दस्तावेज़.
हालाँकि, SVG एक XML- आधारित भाषा है, इसलिए जब हम इनलाइन स्टाइल शीट को एक में जोड़ने वाले होते हैं .svg दस्तावेज़, हमें शैलियों की घोषणा को अंदर रखने की आवश्यकता है cdata, निम्नलिखित नुसार;
cdata यहाँ आवश्यक है, क्योंकि CSS हो सकता है > चरित्र जो XML पार्सर के साथ संघर्ष करेगा। का उपयोग करते हुए cdata एसवीजी में स्टाइल एम्बेड करने के लिए अत्यधिक अनुशंसा की जाती है, भले ही स्टाइल शीट में परस्पर विरोधी चरित्र न दिया गया हो.
बाहरी शैली की चादर
बाहरी शैली की शीट भी एसवीजी तत्वों के लिए उसी तरह काम करती है .एचटीएमएल दस्तावेज़.
फिर में .svg दस्तावेज़, हमें बाहरी स्टाइल शीट को एक के रूप में संदर्भित करना होगा एक्सएमएल-स्टाइलशीट, इस तरह.
समूहन तत्व
एसवीजी तत्वों को इसके साथ समूहीकृत किया जा सकता है
आयत और वृत्त दोनों का परिणाम समान होगा.
फाइनल थॉट
हम सीएसएस के साथ एसवीजी को स्टाइल करने के सभी आवश्यक मामलों से गुजरे हैं और यह एसवीजी के साथ ग्राफिक की सेवा करने के लाभों में से एक है। अगली पोस्ट में हम आगे एक और पर एक नज़र डालेंगे, इसलिए बने रहें.
- डेमो देखें
- स्रोत डाउनलोड करें
