ความคิดเห็น: ฉันใช้เหตุการณ์คลิกของ SVG เพื่อทำสิ่งต่าง ๆ เมื่อเร็ว ๆ นี้ เหตุผลที่ฉันใช้ SVG แทน Canvas เป็นเพราะองค์ประกอบใน SVG สามารถเพิ่มเหตุการณ์คลิกได้ ถัดไปเรามาแนะนำวิธีการเพิ่มเติมในรายละเอียด เพื่อนที่สนใจสามารถเรียนรู้ได้
เมื่อเร็ว ๆ นี้ฉันได้ใช้กิจกรรมคลิกของ SVG เพื่อทำสิ่งต่างๆ เหตุผลที่ฉันใช้ SVG แทน Canvas เป็นเพราะองค์ประกอบใน SVG สามารถเพิ่มเหตุการณ์คลิกได้ ความแตกต่างโดยละเอียดระหว่างพวกเขามีดังนี้:การเปรียบเทียบระหว่าง Canvas และ SVG (ดูรายละเอียด)
ตารางต่อไปนี้แสดงความแตกต่างระหว่างผ้าใบและ SVG
ผ้าใบ
•ขึ้นอยู่กับความละเอียด
•ไม่รองรับตัวจัดการกิจกรรม
•ความสามารถในการแสดงข้อความที่อ่อนแอ
•ความสามารถในการบันทึกภาพผลลัพธ์ในรูปแบบ. png หรือ. jpg
•ดีที่สุดสำหรับเกมที่ใช้ภาพมากซึ่งหลายเกมมักถูกทาสีใหม่
SVG
•ปราศจากความละเอียด
•สนับสนุนตัวจัดการเหตุการณ์
•ดีที่สุดสำหรับแอปพลิเคชันที่มีพื้นที่แสดงผลขนาดใหญ่ (เช่น Google Maps)
•ความซับซ้อนสูงสามารถชะลอการเรนเดอร์ (ไม่มีแอปพลิเคชันที่ใช้งานมากเกินไป DOM)
•ไม่เหมาะสำหรับแอปพลิเคชันเกม
หน้าเว็บที่ทำสามารถใช้งานได้ตามปกติภายใต้ Chorme เนื่องจากรองรับอุปกรณ์มือถือและเป็นเรื่องปกติในการทดสอบ Android อย่างไรก็ตามเมื่อเปิดหน้าบน iPad ฉันพบว่าเหตุการณ์การคลิกนั้นไร้ประโยชน์ ฉันตรวจสอบข้อมูลจำนวนมากและพบว่าเหตุผลสำหรับปัญหา ต่อมาฉันพบว่าการสาธิตคำอธิบายของ SVG ใน W3C สามารถบรรลุเอฟเฟกต์การคลิกได้ เมื่อเปรียบเทียบกับรหัสฉันพบว่าเหตุการณ์การคลิกที่เพิ่มเข้ามาในองค์ประกอบของ SVG โดย jQuery และไม่มีคำอธิบายของ onClick = circle_click (EVT) ในองค์ประกอบของ SVG ฉันเพิ่ม onClick = คลิก (eVT) และแน่นอนว่ามีเหตุการณ์คลิกในองค์ประกอบของ SVG บน iPad