HTML Academy · पाठ

CSS और SMIL से SVG एनीमेशन

CSS ट्रांज़िशन और SMIL से SVG एलिमेंट में गति जोड़ें

पाठ 4, कुल 4 में से13 चरण

CSS और SMIL से SVG एनीमेशन, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

SVG पर CSS संक्रमण

SVG की प्रस्तुति विशेषताओं (fill, stroke, opacity, transform) को CSS संक्रमणों से एनिमेट किया जा सकता है। एक वर्ग जोड़ें और संक्रमण परिभाषित करें: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }। CSS संक्रमण SVG तत्वों पर भी उसी तरह काम करते हैं।

SVG पर CSS की-फ़्रेम एनिमेशन

SVG तत्वों पर @keyframes लागू करें: पथ आरेखन प्रभावों के लिए stroke-dashoffset, धीरे-धीरे दिखाई देने के लिए opacity, और गति तथा घूर्णन के लिए transform को एनिमेट करें। HTML तत्वों के लिए उपयोग किया जाने वाला वही एनिमेशन वाक्य-विन्यास बिना किसी बदलाव के SVG तत्वों पर भी लागू होता है।

@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }

पथ आरेखन प्रभाव

stroke-dasharray और stroke-dashoffset तकनीक पथ को खींचे जाने का आभास देती है: dasharray को पथ की लंबाई के बराबर सेट करें, dashoffset को पथ की लंबाई पर सेट करें (ताकि पथ अदृश्य हो जाए), फिर dashoffset को 0 तक एनिमेट करें। इससे रेखा आरंभ से अंत तक अपने-आप खिंचती हुई दिखाई देती है।

पथ की लंबाई प्राप्त करना

path.getTotalLength() SVG उपयोगकर्ता इकाइयों में पथ की लंबाई लौटाता है। इस मान का उपयोग stroke-dasharray और शुरुआती stroke-dashoffset, दोनों के लिए करें। इससे पथ की जटिलता या लंबाई की परवाह किए बिना एनिमेशन सही ढंग से काम करता है।

SVG पर CSS transform

आधुनिक ब्राउज़र SVG तत्वों पर CSS transform का समर्थन करते हैं। SVG तत्वों में transform-origin डिफ़ॉल्ट रूप से SVG के ऊपरी-बाएँ कोने पर होता है—HTML की तरह तत्व के केंद्र पर नहीं। transform-origin को तत्व के सीमाबद्ध बॉक्स के सापेक्ष बनाने के लिए transform-box: fill-box निर्दिष्ट करें।

.spinner {
  transform-box: fill-box;
  transform-origin: center;
  animation: rotate 1s linear infinite;
}

SMIL एनिमेशन

SMIL (Synchronized Multimedia Integration Language) SVG की अंतर्निहित एनिमेशन प्रणाली है। animate तत्व समय के साथ विशेषता मानों को बदलता है। SMIL के लिए JavaScript या CSS की आवश्यकता नहीं होती—एनिमेशन SVG मार्कअप के अंदर पूरी तरह घोषणात्मक होते हैं।

<circle r="20">
  <animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/>
</circle>

animateTransform

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> SMIL वाक्य-विन्यास का उपयोग करके किसी निर्दिष्ट केंद्र-बिंदु के चारों ओर तत्व को घुमाता है।

animateMotion

<animateMotion> किसी तत्व को SVG पथ पर चलाता है। mpath से किसी पथ का संदर्भ लें या पथ डेटा सीधे लिखें। तत्व अपने-आप पथ के वक्र का अनुसरण करता है—मैन्युअल रूप से निर्देशांक की गणना किए बिना जटिल गति-पथों के लिए यह उपयोगी है।

CSS बनाम SMIL के बीच चयन

CSS एनिमेशन: सभी आधुनिक ब्राउज़र में समर्थित, CSS कैस्केड के साथ एकीकृत और JavaScript से नियंत्रित करना आसान (रोकना, उलटा चलाना)। SMIL: SVG मार्कअप में स्व-निहित, CSS तक पहुँच के बिना स्थिर SVG फ़ाइलों में भी काम करने वाला, तथा पथ-अनुसरण एनिमेशन के लिए घोषणात्मक और अभिव्यंजक।

SVG पथों का आकार-रूपांतरण

दो पथ आकारों के बीच एनिमेट करें: पथों में आदेशों की संख्या समान और संरचना संगत होनी चाहिए। CSS एनिमेशन d विशेषता को एनिमेट करता है (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } मूल CSS पथ आकार-रूपांतरण के लिए।

SVG एनिमेशन की सुगम्यता

जिन उपयोगकर्ताओं को गति असहज लगती है, उनके लिए SVG एनिमेशन बंद या सरल करने हेतु prefers-reduced-motion मीडिया क्वेरी जोड़ें। सजावटी एनिमेशन पूरी तरह बंद कर देने चाहिए; अर्थपूर्ण एनिमेशन (जैसे लोड होने की अवस्थाएँ) रोकने के बजाय सरल किए जाने चाहिए।

ज्ञान जाँच

stroke-dasharray और stroke-dashoffset तकनीक पथ-आरेखन एनिमेशन कैसे बनाती है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

SVG एनिमेशन में गुण-आधारित प्रभावों के लिए CSS संक्रमण और की-फ़्रेम, पथ आरेखन के लिए stroke-dasharray/dashoffset तकनीक, SVG के अंदर घोषणात्मक एनिमेशन के लिए SMIL animate/animateTransform/animateMotion, और सुगम्यता के लिए prefers-reduced-motion का उपयोग होता है। CSS और SMIL एक-दूसरे के पूरक हैं—चुनाव इस आधार पर करें कि SVG को CSS कैस्केड के साथ एकीकरण चाहिए या स्वतंत्र फ़ाइल के रूप में पोर्टेबिलिटी।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “CSS और SMIL से SVG एनीमेशन” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “CSS और SMIL से SVG एनीमेशन” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“CSS और SMIL से SVG एनीमेशन” में मैं क्या सीखूँगा?

CSS ट्रांज़िशन और SMIL से SVG एलिमेंट में गति जोड़ें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“CSS और SMIL से SVG एनीमेशन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ