SVG Paths के लिए transition:draw
draw ट्रांज़िशन से SVG स्ट्रोक को क्रमिक रूप से एनिमेट करें।
SVG Paths के लिए transition:draw, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Sveltejs Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
draw ट्रांज़िशन
draw ट्रांज़िशन SVG पथ के स्ट्रोक को क्रमशः दिखाकर ऐनिमेट करता है।
आयात
svelte/transition से आता है।
import { draw } from "svelte/transition";पथ पर लागू करना
स्ट्रोक वाले SVG <path> एलिमेंट पर जोड़ें।
<svg viewBox="0 0 100 100">
{#if visible}
<path transition:draw={{ duration: 1000 }} d="M10,50 L90,50" stroke="black" />
{/if}
</svg>स्ट्रोक आवश्यक
पथ में दिखाई देने वाला स्ट्रोक होना चाहिए। केवल भरे हुए पथ को draw नहीं किया जा सकता।
अवधि और ईज़िंग
अन्य ट्रांज़िशन की तरह, यह duration, delay और easing स्वीकार करता है।
उपयोग के मामले
लोगो का प्रकट होना, हस्ताक्षर ऐनिमेशन, गणितीय चित्र और इन्फ़ोग्राफ़िक का आरंभ।
Fade के साथ संयोजन
प्रवेश और निकास के लिए in:draw और out:fade का उपयोग करें।
लंबाई की गणना
ट्रांज़िशन अंदरूनी रूप से getTotalLength() का उपयोग करता है। जटिल पथ स्वाभाविक रूप से ऐनिमेट होते हैं।
बहु-पथ ऐनिमेशन
समन्वित रूप से दिखाने के लिए delay का उपयोग करके कई पथों को क्रम से draw करें।
{#each paths as p, i}
<path d={p} stroke="black" transition:draw={{ delay: i * 100 }} />
{/each}प्रदर्शन
अधिकांश डिवाइस पर यह सुचारु रहता है; मोबाइल पर बहुत लंबे पथों के लिए कम अवधि की आवश्यकता हो सकती है।
ब्राउज़र समर्थन
जहाँ SVG और CSS ऐनिमेशन समर्थित हैं वहाँ काम करता है (सभी आधुनिक ब्राउज़र)।
त्वरित जाँच
transition:draw के लिए क्या आवश्यक है?
पुनरावलोकन
वेक्टर ग्राफ़िक्स की क्रमिक ड्रॉइंग को ऐनिमेट करने के लिए स्ट्रोक वाले SVG पथों पर transition:draw का उपयोग करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “SVG Paths के लिए transition:draw” पाठ निःशुल्क है?
हाँ—“SVG Paths के लिए transition:draw” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“SVG Paths के लिए transition:draw” में मैं क्या सीखूँगा?
draw ट्रांज़िशन से SVG स्ट्रोक को क्रमिक रूप से एनिमेट करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Sveltejs Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“SVG Paths के लिए transition:draw” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- transition:fade और transition:fly
- ट्रांज़िशन पैरामीटर: duration delay easing
- असममित ट्रांज़िशन के लिए in: और out:
- SVG Paths के लिए transition:draw