HTML Academy · درس

تحريك SVG باستخدام CSS وSMIL

إضافة الحركة إلى عناصر SVG باستخدام انتقالات CSS وSMIL

تحريك SVG باستخدام CSS وSMIL درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

انتقالات CSS على SVG

يمكن تحريك خصائص العرض في SVG (fill وstroke وopacity وtransform) باستخدام انتقالات CSS. أضف صنفًا وعرّف الانتقال: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. تعمل انتقالات CSS على عناصر SVG بالطريقة نفسها التي تعمل بها على عناصر HTML.

تحريكات إطارات CSS الرئيسية على SVG

طبّق @keyframes على عناصر SVG: حرّك 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 الابتدائية. يضمن ذلك عمل التحريك بشكل صحيح بغض النظر عن تعقيد المسار أو طوله.

transform في CSS على SVG

تدعم المتصفحات الحديثة transform في CSS على عناصر SVG. تكون قيمة transform-origin الافتراضية هي الزاوية العلوية اليسرى لـ SVG، وليست مركز العنصر كما في HTML. حدّد transform-box: fill-box لجعل transform-origin مرتبطًا بالمربع المحيط بالعنصر.

.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، وتعمل في ملفات SVG الثابتة دون الوصول إلى CSS، كما أنها تعريفية ومرنة في تحريك العناصر على طول المسارات.

تشكيل مسارات SVG تدريجيًا

لتحريك الشكل بين مسارين، يجب أن يملك المساران العدد نفسه من الأوامر وبنية متوافقة. يحرك تحريك CSS الخاصية d (في Chrome 88+ وFirefox 72+): @keyframes { to { d: path("M...") } } لتنفيذ تشكيل المسار الأصلي باستخدام CSS.

إتاحة الوصول إلى تحريك SVG

أضف استعلام الوسائط prefers-reduced-motion لتعطيل تحريكات SVG أو تبسيطها للمستخدمين الذين يجدون الحركة مزعجة. ينبغي تعطيل التحريكات الزخرفية بالكامل، بينما ينبغي تبسيط التحريكات ذات المعنى، مثل حالات التحميل، بدلًا من إيقافها.

اختبار المعرفة

كيف تنشئ تقنيتا stroke-dasharray وstroke-dashoffset تحريكًا لرسم المسار؟

الملخص

تستخدم تحريكات SVG انتقالات CSS وإطاراتها الرئيسية لإنشاء تأثيرات قائمة على الخصائص، وتقنيتي stroke-dasharray وdashoffset لرسم المسارات، وعناصر SMIL مثل animate وanimateTransform وanimateMotion لتنفيذ تحريك تعريفي داخل SVG، بالإضافة إلى prefers-reduced-motion لإتاحة الوصول. وتتكامل CSS وSMIL؛ فاختر بينهما وفقًا لحاجة SVG إلى التكامل مع تسلسل CSS أو إلى قابلية نقل ملف مستقل.

الأسئلة الشائعة

هل درس «تحريك SVG باستخدام CSS وSMIL» مجاني؟

نعم — نص درس «تحريك SVG باستخدام CSS وSMIL» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «تحريك SVG باستخدام CSS وSMIL»؟

إضافة الحركة إلى عناصر SVG باستخدام انتقالات CSS وSMIL تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «تحريك SVG باستخدام CSS وSMIL»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy