إدارة تفاعل SVG مع خاصية أحداث المؤشر

جرب النقر أو النقر فوق صورة SVG أدناه. إذا وضعت المؤشر في المكان الصحيح (المسار المظلل) ، فيجب أن تفتح الصفحة الرئيسية لمجلة Smashing في علامة تبويب متصفح جديدة. إذا حاولت النقر فوق بعض المساحة البيضاء ، فقد تكون مرتبكًا حقًا بدلاً من ذلك.

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

التفت إلى مواصفات SVG لمعرفة المزيد حول ما قد يحدث وما إذا كان SVG يقدم إصلاحًا أم لا. الجواب: pointer-events .

لا ينبغي الخلط بينه وبين أحداث مؤشر DOM ( D ocument O bject M odel) ، فإن أحداث pointer-events هي خاصية CSS وسمة عنصر SVG. باستخدامه ، يمكننا إدارة أي أجزاء من مستند أو عنصر SVG يمكنه استقبال الأحداث من جهاز تأشير مثل الماوس أو لوحة التتبع أو الإصبع.

ملاحظة حول المصطلحات: "أحداث المؤشر" هي أيضًا اسم ميزة منصة الويب غير المحددة للجهاز لإدخال المستخدم. ومع ذلك ، في هذه المقالة - ولأغراض خاصية pointer-events - تتضمن عبارة "أحداث المؤشر" أيضًا أحداث الماوس واللمس.

خارج الصندوق: "نموذج الشكل" الخاص بـ SVG

يفرض استخدام CSS مع HTML نموذج تخطيط مربع على HTML. في نموذج تخطيط الصندوق ، يقوم كل عنصر بإنشاء مستطيل حول محتوياته. قد يكون هذا المستطيل مضمنًا ، أو على مستوى مضمن ، أو على مستوى ذري مضمّن ، أو كتلة ، لكنه لا يزال مستطيلاً بأربع زوايا قائمة وأربعة حواف. عندما نضيف رابطًا أو مستمع حدث إلى عنصر ، فإن المنطقة التفاعلية تطابق أبعاد المستطيل.

ملاحظة : تؤدي إضافة clip-path إلى عنصر تفاعلي إلى تغيير حدوده التفاعلية. بعبارة أخرى ، إذا قمت بإضافة clip-path سداسي إلى a ، فإن النقاط الموجودة في مسار القطع فقط ستكون قابلة للنقر. وبالمثل ، فإن إضافة تحويل الانحراف سوف يحول المستطيلات إلى أشكال معينية.

لا يحتوي SVG على نموذج تخطيط مربع. كما ترى ، عند احتواء مستند SVG في مستند HTML ، ضمن تخطيط CSS ، يلتزم عنصر SVG الجذر بنموذج تخطيط الصندوق. العناصر التابعة لها لا تفعل ذلك. نتيجة لذلك ، لا تنطبق معظم الخصائص المتعلقة بتخطيط CSS على SVG.

لذا بدلاً من ذلك ، يحتوي SVG على ما سأطلق عليه "نموذج الشكل". عندما نضيف رابطًا أو مستمعًا لحدث إلى مستند أو عنصر SVG ، لن تكون المنطقة التفاعلية بالضرورة مستطيلاً. تحتوي عناصر SVG على مربع محيط. يُعرَّف الصندوق المحيط على أنه: المستطيل الأكثر إحكامًا والمحاذاة مع محاور نظام إحداثيات المستخدم الخاص بالعنصر الذي يحيطه بالكامل وبنسله. لكن في البداية ، تعتمد أجزاء مستند SVG التفاعلية على الأجزاء المرئية و / أو المطلية .

العناصر المرسومة مقابل العناصر المرئية

يمكن "ملء" عناصر SVG ولكن يمكن أيضًا "حدها". يشير Fill إلى الجزء الداخلي للشكل. تشير السكتة الدماغية إلى مخططها.

تعد "التعبئة" و "الحد" معًا عمليات طلاء تجسد العناصر إلى الشاشة أو الصفحة (تُعرف أيضًا باسم اللوحة القماشية ). عندما نتحدث عن العناصر المطلية ، فإننا نعني أن العنصر له تعبئة و / أو حد. عادة ، هذا يعني أن العنصر مرئي أيضًا.

ومع ذلك ، يمكن رسم عنصر SVG بدون أن يكون مرئيًا. يمكن أن يحدث هذا إذا كانت قيمة السمة visible أو خاصية CSS hidden أو عندما يكون display none . العنصر موجود ويحتل مساحة نظرية. لا يمكننا رؤيته (وقد لا تكتشفه التكنولوجيا المساعدة).

ربما الأمر الأكثر إرباكًا هو أن العنصر يمكن أن يكون مرئيًا أيضًا - أي أن يكون له قيمة visibility محسوبة visible - دون أن يتم رسمه. يحدث هذا عندما تفتقر العناصر إلى كل من الحد والتعبئة.

ملاحظة : قيم اللون ذات الشفافية ألفا (مثل rgba(0,0,0,0) ) لا تؤثر على ما إذا كان العنصر مرسومًا أم مرئيًا. بعبارة أخرى ، إذا كان العنصر يحتوي على حد أو تعبئة شفافة ألفا ، فإنه يتم طلاؤه حتى إذا كان لا يمكن رؤيته.

إن معرفة متى يتم رسم عنصر ما أو رؤيته أو عدمه أمر بالغ الأهمية لفهم تأثير كل قيمة من قيم pointer-events .

الكل أو لا شيء أو شيء ما بينهما: القيم

pointer-events هي خاصية CSS وسمة عنصر SVG. قيمته الأولية هي auto ، مما يعني أن الأجزاء المرسومة والمرئية فقط هي التي ستتلقى أحداث المؤشر. يمكن تقسيم معظم القيم الأخرى إلى مجموعتين:

1. القيم التي تتطلب عنصرًا ليكون مرئيًا ؛ و
2. القيم التي لا تفعل ذلك.

painted ، fill ، stroke ، all تندرج في الفئة الأخيرة. نظرائهم الذين يعتمدون على الرؤية - visiblePainted ، المرئي ، visibleFill ، visibleStroke visible - يقعون في الأول.

تحدد مواصفات SVG 2.0 أيضًا قيمة bounding-box . عندما تكون قيمة pointer-events هي bounding-box ، يمكن أيضًا للمنطقة المستطيلة حول العنصر استقبال أحداث المؤشر. حتى كتابة هذه السطور ، يدعم Chrome 65+ فقط قيمة bounding-box .

none هو أيضا قيمة صالحة. يمنع العنصر وتوابعه من تلقي أي أحداث مؤشر. يمكن استخدام خاصية CSS الخاصة pointer-events مع عناصر HTML أيضًا. ولكن عند استخدامها مع HTML ، فإن القيم auto هي فقط القيم الصالحة none منها.

نظرًا لأنه يتم توضيح قيم pointer-events بشكل أفضل من شرحها ، فلنلقِ نظرة على بعض العروض التوضيحية.

لدينا هنا دائرة ذات تعبئة وحد مطبقة. إنها مرسومة ومرئية . يمكن أن تتلقى الدائرة بأكملها أحداث المؤشر ، ولكن لا يمكن للمنطقة خارج الدائرة.

قم بتعطيل التعبئة بحيث تكون قيمتها none . الآن إذا حاولت التمرير أو النقر أو النقر فوق الجزء الداخلي من الدائرة ، فلن يحدث شيء. ولكن إذا فعلت الشيء نفسه لمنطقة الحد ، فسيظل إرسال أحداث المؤشر. يعني تغيير قيمة fill إلى none أن هذه المنطقة مرئية ، لكنها غير مطلية .

دعونا نجري تغييرًا بسيطًا على الترميز الخاص بنا. سنضيف pointer-events="visible" لعنصر circle ، مع الاحتفاظ fill=none .

الآن يمكن للمنطقة غير المطلية المحاطة بالضربة استقبال أحداث المؤشر.

زيادة المساحة القابلة للنقر في صورة SVG

دعنا نعود إلى الصورة من بداية هذه المقالة. "الجمشت" الخاص بنا هو عنصر path ، على عكس مجموعة من المضلعات لكل منها fill stroke هذا يعني أنه لا يمكننا فقط إضافة pointer-events="all" وتسميتها يوميًا.

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

على الرغم من أن هذا المستطيل غير مرئي ، إلا أنه لا يزال مرئيًا من الناحية الفنية (أي visibility: visible ). ومع ذلك ، فإن عدم وجود حشو يعني أنه لم يتم رسمه . صورتنا تبدو هي نفسها. في الواقع لا يزال يعمل بنفس الطريقة - لا يزال النقر فوق المساحة البيضاء لا يؤدي إلى تشغيل عملية التنقل. ما زلنا بحاجة إلى إضافة سمة pointer-events a عنصرنا. استخدام القيم visible أو all القيم ستعمل هنا.

الآن يمكن أن تتلقى الصورة بأكملها أحداث المؤشر.

سيؤدي استخدام bounding-box التخلص من الحاجة إلى عنصر وهمي. ستتلقى جميع النقاط داخل المربع المحيط أحداث المؤشر ، بما في ذلك المسافة البيضاء المحاطة بالمسار. ولكن مرة أخرى: pointer-events="bounding-box" غير مدعوم على نطاق واسع. حتى يتم ذلك ، يمكننا استخدام عناصر غير مصبوغة.

استخدام pointer-events عند خلط SVG و HTML

حالة أخرى حيث قد تكون pointer-events مفيدة: استخدام SVG داخل زر HTML.

في معظم المتصفحات - يعتبر Firefox و Internet Explorer 11 استثناءات هنا - ستكون قيمة event.target هي عنصر SVG بدلاً من زر HTML الخاص بنا. دعونا نضيف pointer-events="none" إلى علامة SVG الافتتاحية الخاصة بنا.

الآن عندما ينقر المستخدمون على زرنا أو يضغطون عليه ، فإن event.target سيشير إلى button .

سيلاحظ هؤلاء المتمرسون في DOM و JavaScript أن استخدام الكلمة الأساسية function بدلاً من وظيفة السهم this بدلاً من event.target على إصلاح هذه المشكلة. ومع ذلك ، فإن استخدام pointer-events="none" (أو pointer-events: none; في CSS الخاص بك) يعني أنك لست مضطرًا إلى إلزام هذا النوع من JavaScript بالذاكرة.

خاتمة

يدعم SVG نفس النوع من التفاعل الذي اعتدنا عليه مع HTML. يمكننا استخدامه لإنشاء مخططات تستجيب للنقرات أو النقرات. يمكننا إنشاء مناطق مرتبطة لا تلتزم بنموذج مربع CSS و HTML. ومع إضافة pointer-events ، يمكننا تحسين الطريقة التي تتصرف بها مستندات SVG استجابةً لتفاعل المستخدم.

دعم المستعرض pointer-events SVG قوي. يدعم كل متصفح يدعم SVG خاصية مستندات وعناصر SVG. عند استخدامه مع عناصر HTML ، يكون الدعم أقل قوة قليلاً. لا يتوفر في Internet Explorer 10 أو الإصدارات السابقة له ، أو أي إصدار من Opera Mini.

لقد خدشنا للتو سطح pointer-events في هذه القطعة. للحصول على معالجة تقنية أكثر تعمقًا ، اقرأ مواصفات SVG. تقدم MDN (شبكة مطوري Mozilla) Web Docs المزيد من الوثائق الملائمة لمطوري الويب pointer-events ، كاملة مع الأمثلة.