مضيفا الرسومات المتدرجة (SVG) في متصفح غير مدعوم
في منشور سابق في هذه السلسلة ، ذكرنا شيئًا فشيئًا عن مشكلة SVG مع المتصفحات القديمة واستخدام Raphael.js لخدمة الرسم كحل بديل. في هذا المنشور سوف نلقي نظرة على هذه المسألة.
الفكرة بسيطة ، سنظل نستخدم عناصر SVG كطريقة أساسية لتقديم رسومات على صفحة الويب الخاصة بنا ، ولكن في نفس الوقت سنوفر أيضًا وظيفة احتياطية بحيث لا يزال من الممكن تقديمه في المتصفحات غير المدعومة.
بالتأكيد ، هناك العديد من المسارات التي يمكننا اتخاذها ، لكننا سننظر فقط في حلين أعتقد أنه حل عام أفضل. لذلك ، دعونا نرى كيف يمكننا القيام بذلك.
باستخدام عنصر الكائن
بصرف النظر عن وضعه مباشرة في مستند HTML ، هناك عدة طرق لتضمين SVG. على سبيل المثال ، إذا قمنا بتخزين الرسم في .SVG الملف ، يمكننا استخدام جزء.
لأغراض العرض التوضيحي ، أضفنا شعار Apple مع SVG إلى صفحة الويب الخاصة بنا. ومع ذلك ، ستبقى المتصفحات غير المدعومة فارغة. لحل المشكلة ، يمكننا تقديم صورة نقطية الرسم ، على النحو التالي ؛
بهذه الطريقة ، ستستمر المتصفحات المدعومة .SVG, في حين ستحمل المستعرضات غير المدعومة رسم الصورة النقطية. أضفنا “بابوا نيو غينيا” علامة أسفل شعار Apple لتتبع الرسم الذي يتم تسليمه.
ومع ذلك ، كما ذكرنا في آخر وظيفة, الرسومات النقطية ليست مرنة وقابلة للتطوير مثل SVG. لذلك ، دعونا نلقي نظرة على حل آخر.
باستخدام Modernizr
طريقة أخرى يمكننا استخدامها هي باستخدام Modernizr. بالنسبة لأولئك الذين ليسوا على دراية بمكتبة جافا سكريبت هذه ، لا تقلق من أننا سنحصل على منشور مخصص لتغطية ذلك. الآن ، فقط مواكبة لنا.
بادئ ذي بدء ، دعونا نعد بعض مكتبات JavaScript المطلوبة, Modernizr.js و Raphael.js. ثم ، نحن بحاجة أيضا إلى تحويل لدينا .SVG ملف إلى تنسيق مدعوم من Raphael مع هذه الأداة ، ReadySetRaphael.js ، وحفظ الإخراج في منفصلة .شبيبة ملف؛ دعنا نسميها svg.js.
قم بتضمين Modernzr.js في مستند HTML ، مثل:
وبالنسبة للملفين الآخرين, raphael.js و svg.js, سنقوم بتحميله مشروط, فقط عند عرضها في متصفحات غير مدعومة.
مع Modernizr يمكننا اكتشاف قدرة المتصفح ، في هذه الحالة سوف نكتشف ما إذا كان المتصفح قادرًا على تقديم SVG ، وإذا لم يكن كذلك ، فسنقدم البرنامج النصي:
إذا (! Modernizr.inlinesvg) document.write (''
