خطوات إبداعية عملية
أصلح معرّفات SVG المكررة عندما تظهر الشارة مرتين
قد تعمل شارة SVG منفردة ثم يتغير لونها أو قصّها عندما تلصق نسخة بجوارها. معرّفات التدرج أو مسار القص المتكررة تجعل المراجع في الصفحة ملتبسة.
طلبنا من Ciyo شارتين خياليتين لـ Cedar Cup، زوجاً معطوباً عمداً وآخر مصححاً. تحتفظ النسخ المصححة بالرسم وتستخدم بادئات معرّفات منفصلة. يتيح المثال القابل للتحرير فحص الحالتين في المتصفح.
افحص المعرّفات ومراجعها كنظام واحد
يعرّف ID عنصراً داخل المستند، ويشترط SVG أن يكون فريداً. وجود جذرَي SVG مضمنين في صفحة HTML واحدة لا يمنح استثناء عاماً من هذه القاعدة.
احصر التدرجات ومسارات القص والأقنعة والمرشحات وكل التعريفات المسماة. ثم اجمع المراجع كلها، بما فيها url(#...) وأجزاء href ومراجع إمكانية الوصول. إعادة تسمية تعريف دون تحديث استخداماته قد تستبدل تعارضاً بمورد مفقود.
امنح كل نسخة بادئة صريحة
تستخدم الشارة الأولى cedar-a-gradient وcedar-a-clip، والثانية cedar-b-gradient وcedar-b-clip. تشير كل شارة إلى تعريفاتها. ينبغي للمكوّن القابل لإعادة الاستخدام إنشاء بادئة ثابتة وفريدة لكل نسخة، لا تكرار بادئة مكتوبة مسبقاً في كل عرض.
أبق الرسم نفسه أثناء إصلاح الأسماء. يسهّل ذلك المقارنة ويقلل احتمال إخفاء إعادة تصميم بصري لمشكلة المراجع الفعلية.
| النسخة | التدرج | القص |
|---|---|---|
| A | المعرّف cedar-a-gradient | المعرّف cedar-a-clip |
| B | المعرّف cedar-b-gradient | المعرّف cedar-b-clip |
اطلب المقارنة والكود من Ciyo
ابدأ مشروعاً منفصلاً واطلب الزوجين المضمنين المعطوب والمصحح. ضع تسمية واضحة على القسم المعطوب كي لا يُفهم أنه المكوّن النهائي. اطلب HTML النهائي وكود SVG المستقل إلى جانب معاينة PNG.
قبلت اللوحة معاينة PNG في الجلسة الفعلية، لكنها لم توفر تنزيل ملفات HTML أو SVG. طلبنا من الوكيل لصق المصدر كاملاً في الرد، ثم حفظناه في المثال المرتبط أدناه. استخدم طريقة التسليم نفسها إن واجهت هذا القيد.
أنشئ مثالاً عملياً لتكرار معرّفات SVG لعلامة Cedar Cup الخيالية. استخدم أدوات الكود فقط، دون توليد صور أو فيديو مدفوع. سلّم ملف HTML قابلاً للتنزيل يضم شارتَي SVG مضمنتين جنباً إلى جنب، لكل منهما تدرج ومسار قص مختلفان، مع المعرّفات الفريدة على مستوى المستند cedar-a-gradient وcedar-a-clip وcedar-b-gradient وcedar-b-clip. يجب أن تستخدم كلتا الصورتين viewBox="0 0 120 120" وتُعرضا بعرض 160px. أضف مقارنة معطوبة بتسمية واضحة تعيد استخدام المعرّفات، ثم الزوج المصحح وقائمة فحص نصية. سلّم كذلك ملفَي SVG المستقلين المصححين. أضف معاينة PNG للزوج المصحح إلى اللوحة. حافظ على الرسم الفعلي نفسه بين الزوج المعطوب والمصحح. تحقّق برمجياً من فرادة المعرّفات وكل مراجع url(#...). أخبرني بدقة بما تحققت منه وقدّم روابط التنزيل. هذا مثال خيالي لمكوّن موقع، وليس معيار أداء.راجع الزوج النهائي واحفظ المصدر
تعرض اللوحة النهائية معاينة مصححة واحدة: شارة دائرية خضراء وشارة سداسية كهرمانية. قصّت المعاينة الأولى اسم العلامة؛ رفع الوكيل الرسم وفحص هندسته النهائية وأزال المعاينة القديمة. تستخدم الحالتان المقارنتان الرسم النهائي نفسه.
خصّص بادئة موارد لكل نسخة من المكوّن
حفظنا الكود الملصق وفحصنا القسم المصحح منفصلاً عن القسم المعطوب عمداً. يحتوي الزوج المصحح على أربعة معرّفات تعريف فريدة وأربعة مراجع موارد، يُحل كل منها داخل SVG الخاص به. لا تفحص النص التوضيحي كما لو كان شيفرة ترميز.
اختبر الصفحة بوجود النسختين
افتح مثال HTML في المتصفح وقارن الزوجين ذوي التسميات الواضحة. لا يثبت العرض المنفرد ما يحدث عند اشتراك صورتَي SVG مضمنتين في مستند واحد. أبق المعرّفات المكررة عمداً داخل القسم التعليمي المعطوب فقط.
راجعنا الصفحة المحفوظة بصورة مستقلة في Chromium. لمكوّن منشور، أعد الفحص في كل متصفح مدعوم وبعد أي أداة تحسين تعيد كتابة المعرّفات. أضف نسخة ثالثة وغيّر الترتيب وتأكد من بقاء المراجع صحيحة.
أسئلة عملية
هل يجعل اختلاف جذور SVG المعرّفات المكررة آمنة؟
لا تعتمد على ذلك لصور SVG مضمنة في مستند واحد. أعط كل نسخة معرّفات تعريف فريدة وحدّث مراجعها.
هل يكفي تغيير اسم التدرج؟
حدّث كل مرجع لذلك التدرج أيضاً، وافحص التعريفات المسماة الأخرى مثل مسارات القص والأقنعة.
لماذا أحد أقسام الصفحة القابلة للتنزيل غير صالح عمداً؟
يوضح الزوج المعطوب ذو التسمية الصريحة المشكلة. الزوج المصحح وحده هو مثال إعادة الاستخدام.
افحص مكوّنات SVG المتكررة معاً
ابدأ بمثال واحد تم التحقق منه في Ciyo. احتفظ بالأصل وافحص الملف المصدّر قبل استخدامه في مشروعك.