transition:draw لمسارات SVG
حرّك خطوط SVG تدريجيًا باستخدام انتقال draw
transition:draw لمسارات SVG درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
انتقال draw
يحرّك انتقال draw مسارات SVG من خلال إظهارها تدريجيًا.
الاستيراد
يأتي من svelte/transition.
import { draw } from "svelte/transition";التطبيق على مسار
أرفقوه بعنصر SVG من نوع <path> يحتوي على stroke.
<svg viewBox="0 0 100 100">
{#if visible}
<path transition:draw={{ duration: 1000 }} d="M10,50 L90,50" stroke="black" />
{/if}
</svg>ضرورة وجود Stroke
يجب أن يحتوي المسار على stroke مرئي. ولا يمكن رسم المسارات التي تحتوي على fill فقط.
المدة والتسارع
مثل الانتقالات الأخرى، يقبل هذا الانتقال duration وdelay وeasing.
حالات الاستخدام
إظهار الشعارات، وحركات التوقيعات، والرسومات الرياضية، ومقدمات الرسوم المعلوماتية.
الدمج مع Fade
استخدموا in:draw وout:fade لتحقيق تناظر مختلف بين الدخول والخروج.
حساب الطول
يستخدم الانتقال getTotalLength() داخليًا. وتتحرك المسارات المعقدة بسلاسة طبيعية.
تحريك مسارات متعددة
رتّبوا رسم المسارات المتعددة باستخدام delay لإظهارها بطريقة منسّقة.
{#each paths as p, i}
<path d={p} stroke="black" transition:draw={{ delay: i * 100 }} />
{/each}الأداء
يعمل بسلاسة على معظم الأجهزة؛ وقد تحتاج المسارات الطويلة جدًا إلى مدد أقصر على الأجهزة المحمولة.
دعم المتصفحات
يعمل في كل مكان تُدعَم فيه SVG وحركات CSS، أي في جميع المتصفحات الحديثة.
تحقق سريع
ما الذي يتطلبه transition:draw؟
مراجعة
استخدموا transition:draw على مسارات SVG التي تحتوي على stroke لتحريك الرسم التدريجي للرسومات المتجهة.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «transition:draw لمسارات SVG» مجاني؟
نعم — نص درس «transition:draw لمسارات SVG» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «transition:draw لمسارات SVG»؟
حرّك خطوط SVG تدريجيًا باستخدام انتقال draw تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «transition:draw لمسارات SVG»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- transition:fade وtransition:fly
- معلمات الانتقال: duration وdelay وeasing
- in: وout: للانتقالات غير المتماثلة
- transition:draw لمسارات SVG