CSS Motion Path مع SVG: دليل عملي للمطورين

CSS Motion Path مع SVG

تتيح CSS Motion Path تحريك عنصر على مسار محدد بدل نقله في خط مستقيم. هذا مفيد مع SVG لان المسارات والمنحنيات المرسومة في التصميم يمكن ان تصبح مسارا للحركة داخل المتصفح.

الخلاصة

• offset-path يحدد المسار.
• offset-distance يتحكم في تقدم العنصر على المسار.
• يمكن استخدام بيانات SVG path داخل CSS path().
• يجب اختبار المحاذاة في التخطيطات المتجاوبة.
• دعم prefers-reduced-motion ضروري لتجربة مستخدم افضل.

مثال اساسي

.marker {
  offset-path: path("M20 120 C120 20 220 220 340 80");
  animation: travel 4s linear infinite;
}

@keyframes travel {
  to {
    offset-distance: 100%;
  }
}

القيمة داخل path() تستخدم صياغة SVG، لذلك يمكن اعادة استخدام مسار موجود في ايقونة او خريطة او رسم توضيحي.

متى تستخدمه؟

يناسب جولات المنتج، مسارات الخرائط، المؤشرات التي تتحرك فوق الرسوم البيانية، الايقونات التي تتبع منحنى، وحالات التقدم المرئية. استخرج المسار اولا عبر SVG Path Extractor، ثم راجع الملف في SVG Viewer، وحسنه باستخدام SVG Optimizer.

نمط HTML و CSS

<svg viewBox="0 0 360 160" aria-hidden="true">
  <path d="M20 120 C120 20 220 220 340 80" fill="none" stroke="currentColor" />
</svg>

<span class="dot" aria-label="Upload progress"></span>

.dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #14b8a6;
  offset-path: path("M20 120 C120 20 220 220 340 80");
  offset-distance: 0%;
  offset-rotate: auto;
  animation: move-dot 3200ms ease-in-out infinite;
}

@keyframes move-dot {
  to {
    offset-distance: 100%;
  }
}

offset-rotate: auto يدير العنصر حسب اتجاه المسار. استخدمه للاسهم او العناصر الاتجاهية، وتجنبه مع النصوص.

التجاوب وإمكانية الوصول

CSS path() لا يتوسع تلقائيا مثل SVG viewBox. اجعل مساحة الحركة مستقرة، واستخدم احداثيات متطابقة مع التصميم، واختبر على الهاتف واللوحي وسطح المكتب.

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
    offset-distance: 100%;
  }
}

يجب ان تساعد الحركة على الفهم لا ان تغطي المحتوى. لا تعتمد على الحركة وحدها لشرح الحالة، ولا تجعل العنصر المتحرك يحجب الازرار او النماذج.

سير عمل SVGView

1. افتح SVG في SVG Viewer وتحقق من viewBox.
2. استخرج المسار عبر SVG Path Extractor.
3. نظف ملفات SVG الخارجية باستخدام SVG Sanitizer.
4. نسق الكود في SVG Formatter.
5. حسن الملف في SVG Optimizer ثم اختبر الحركة مرة اخرى.

الخلاصة النهائية

تحول CSS Motion Path مسارات SVG الى حركة واجهة واضحة وسهلة الصيانة. ابدأ بمسار بسيط، واجعل الحركة ذات هدف، وتحقق من الوصولية قبل النشر.