जब आप इनलाइन SVG का उपयोग करते हैं, तो वह सभी SVG कोड HTML में सही होता है, और इस प्रकार DOM में। आप उन्हें वैसे ही स्टाइल कर सकते हैं जैसे आप एक ;
, या कोई अन्य HTML तत्व। सीएसएस स्टाइल एनिमेशन और बदलाव की संभावना लाता है।
एक सरल उदाहरण:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा इनलाइन SVG के रूप में पेन कोडपेन लोगो देखें।
एक ने लिखा कि इस ट्यूटोरियल में थोड़ा और जटिल डिजाइन कैसे निपटाया जाए। यहाँ वह डेमो है।
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन वुफू एसवीजी विज्ञापन देखें।
इस पेंचकस में हम वुफू के लिए एक और एनिमेटेड एसवीजी विज्ञापन बनाते हैं, जो लगभग खरोंच से शुरू होता है। डिजाइन में कुछ बादल हैं जिन्हें हम आसानी से और अंतहीन रूप से दोहराते हैं।
सबसे पहले, हमने एसवीजी को इनलाइन किया और सीएसएस के साथ इसे एनिमेटेड करके उसी HTML डॉक्यूमेंट से जोड़ा। लेकिन फिर, यह दिखाने के लिए कि यह कैसे काम करता है, हमने उस सीएसएस को स्वयं SVG के भीतर स्थानांतरित कर दिया, जो पूरी तरह से मान्य है। कारण यह है कि आप ऐसा करना चाह सकते हैं, क्योंकि तब एनीमेशन तब भी चल सकता है जब आप एसवीजी का उपयोग करते हैं background-image।
डेमो:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन kKdDj देखें।
उस एनीमेशन के लिए ब्राउज़र समर्थन अलग-अलग होगा। इस लेखन के समय, यह केवल क्रोम में काम कर रहा था।
फ़ाइलें
- 22-एड-1. एसवीजी