Pointer Events ของ SVG: ให้พื้นที่คลิกตรงกับงานภาพ

pointer-events ของ SVG ควบคุมว่าส่วนใดของกราฟิกเป็นเป้าหมายเหตุการณ์จากตัวชี้ได้ รูปทรงเติมสี เส้นขอบบาง และช่องเปิดว่างอาจตอบสนองต่างกันแม้อยู่ในภาพประกอบเดียว ตั้งพื้นที่รับการคลิกให้ตรงการทำงานที่ผู้อ่านคาด แล้วทดสอบพื้นที่ว่างอย่างละเอียดเท่าพื้นที่มีสี

คู่มือนี้สำหรับงานภาพในอินเทอร์เฟซเว็บ: แผนภาพที่เลือกได้ ตราที่คลิกได้ หรือไอคอนในปุ่ม หาก SVG มีพาธใช้ได้อยู่แล้ว ให้แก้โค้ดโต้ตอบโดยตรง การแปลงเป็นเวกเตอร์เข้าสู่กระบวนการเฉพาะเมื่อรูปทรงที่แก้ได้ยังติดอยู่ใน PNG หรือ JPG

เริ่มที่องค์ประกอบที่รับการคลิก

สำหรับ SVG ค่า auto ปริยายทำงานเหมือน visiblePainted รูปทรงที่มองเห็นรับเป้าหมายเหนือสีเติมเมื่อ fill ไม่ใช่ none หรือเหนือเส้นขอบเมื่อ stroke ไม่ใช่ none ข้อกำหนดการโต้ตอบ SVG นิยามกฎทดสอบตำแหน่งเหล่านี้

นั่นอธิบายไอคอนที่ดูเหมือนเสีย: listener อาจทำงานบนเส้นรอบรูปแต่พลาดกลางว่าง เบราว์เซอร์ทดสอบรูปทรง ไม่ได้สมมติว่าทุกจุดในสี่เหลี่ยมที่ครอบมันหมายถึงสิ่งเดียวกัน

ตัวเลือกที่มีประโยชน์สำหรับกระบวนการนี้คือ:

all ไม่ได้หมายถึง “ทุกจุดในวิวพอร์ต SVG” ยังอ้างอิงรูปทรงองค์ประกอบ หากต้องการสี่เหลี่ยมเฉพาะรอบภาพละเอียดให้ตอบสนอง ให้สร้างสี่เหลี่ยมนั้นอย่างตั้งใจ

แยก สีโปร่งใส จาก ไม่มีสีวาด ด้วย fill="transparent" ยังเป็นค่าเติม ส่วน fill="none" ลบสีเติม ความทึบเพียงอย่างเดียวไม่ใช่วิธีเชื่อถือได้ให้กรอบซ้อนละเลยการคลิก

ทดสอบสีเติม ช่องเปิด และเส้นขอบเปิด

เราสร้างชุดทดลอง SVG อินไลน์เล็กด้วยรูปทรงเขียนเอง มีพาธประกอบสีน้ำเงินพร้อมช่องเปิดสี่เหลี่ยม เส้นขอบเปิดสีส้ม และสำเนาเส้นนั้นเหนือเป้าหมายโปร่งใสแยก เป็นตัวอย่างสอน ไม่ใช่ผลแปลง PerfectVector

ในการทดสอบเบราว์เซอร์ คลิกแถบน้ำเงินบันทึก ring คลิกกลางว่างบันทึก ring-stage ซึ่งเป็น SVG ที่ครอบอยู่ เส้นส้มบันทึก trail ส่วนใต้ยอดบันทึก stroke-stage ในแผงที่สาม ทั้งสองตำแหน่งบันทึก hit

พาธน้ำเงินใช้พาธย่อยสี่เหลี่ยมสองส่วนและ fill-rule="evenodd":

<svg id="ring-stage" viewBox="0 0 240 180">
  <path id="ring" fill="#2874c8" fill-rule="evenodd"
    d="M30 20H210V160H30Z M85 60H155V120H85Z" />
</svg>

สี่เหลี่ยมภายในอยู่นอกพื้นที่เติมตาม กฎเติมคู่คี่ เป็นช่องเปิดจริง สี่เหลี่ยมขาวที่วางทับจะเป็นอีกรูปทรงระบายที่มีพฤติกรรมรับตัวชี้ของตัวเอง หากรูปทรงเองผิด ใช้ คู่มือซ่อมช่องเปิด SVG ก่อนเปลี่ยนกฎเหตุการณ์

นี่คือเส้นขอบเปิดจากแผงที่สอง:

<svg id="stroke-stage" viewBox="0 0 240 180">
  <path id="trail" d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="stroke" />
</svg>

สำหรับการทดสอบเร็ว วางโค้ดตัวอย่างใดก็ได้ในไฟล์ HTML พร้อมตัวบันทึกนี้ต่อท้าย กำหนดขนาด SVG ให้เห็น เช่น width="360" height="270"

<output id="result" aria-live="polite">Click the artwork.</output>
<script>
  const stage = document.querySelector('svg');
  const result = document.querySelector('#result');
  stage.addEventListener('click', (event) => {
    result.textContent = `Target: ${event.target.id}`;
  });
</script>

คลิกพื้นที่ระบาย ภายในว่าง และมุมนอกภาพ การบันทึก event.target แยกการคลิกพาธจากการคลิกที่เพียงมาถึงคอนเทนเนอร์ SVG ตัวอย่างนี้ทดสอบการเลือกเป้าหมาย ไม่ใช่ตัวควบคุมโต้ตอบที่เสร็จแล้ว

เพิ่มเป้าหมายโดยไม่ทำงานภาพหนาขึ้น

สมมติว่าพื้นที่ทั้งหมดรอบเส้นทางส้มควรเลือกเส้นนั้น การเพิ่มเส้นขอบที่เห็นจะเปลี่ยนภาพ เป้าหมายแยกให้พื้นที่โต้ตอบมีรูปทรงของตัวเอง:

<svg id="hit-stage" viewBox="0 0 240 180">
  <rect id="hit" x="20" y="20" width="200" height="140"
    fill="transparent" pointer-events="all" />
  <path d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="none" />
</svg>

สี่เหลี่ยมอยู่หลังงานภาพ พาธส้มละเลยการเป็นเป้าหมายตัวชี้ สี่เหลี่ยมจึงรับคลิกผ่านมันได้ พิกัดกำหนดเป้าหมายที่ตั้งใจอย่างชัดเจน ข้อมูลพาธที่เห็นเหมือนแผงที่สอง

มีประโยชน์กับพื้นที่แผนภาพหรือเส้นบางที่ชี้ยาก อย่าให้เป้าหมายทับตัวควบคุมอื่นที่ไม่เกี่ยว และตัดสินใจว่าควรเกิดอะไรตรงที่สองพื้นที่พบกัน รูปทรงใหญ่ที่มองไม่เห็นดักคลิกขององค์ประกอบข้างเคียงได้ง่ายเท่ารูปทรงที่เห็น

สำหรับไอคอนเรียบง่ายที่ทำงานเดียว ปุ่ม HTML มักให้เป้าหมายที่ต้องการโดยไม่ต้องเพิ่มสี่เหลี่ยม SVG เลย

ให้ตัวควบคุมรับการสั่งงานด้วยแป้นพิมพ์

การกำหนดเป้าหมายตัวชี้ไม่ให้ชื่อ การสั่งงานแป้นพิมพ์ หรือความหมายของปุ่ม ใส่ไอคอนที่ทำงานเดียวในปุ่ม HTML ที่มีชื่อ และให้งานภาพเป็นของตกแต่ง:

<button id="select-trail" type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24"
    width="24" height="24" style="pointer-events: none">
    <path d="M3 20L12 4L21 20" fill="none"
      stroke="currentColor" stroke-width="3" />
  </svg>
  Select trail
</button>
<output id="selection" aria-live="polite"></output>
<script>
  const button = document.querySelector('#select-trail');
  const selection = document.querySelector('#selection');
  button.addEventListener('click', () => {
    selection.textContent = 'Trail selected';
  });
</script>

องค์ประกอบปุ่ม HTML ให้พฤติกรรมตัวควบคุม ข้อความที่เห็นให้ชื่อ คงตัวบ่งชี้โฟกัสที่เห็น ใช้ลิงก์จริงเมื่อการทำงานนำไปหน้าอื่น

ในชุดทดลอง Tab โฟกัสปุ่ม จากนั้นทั้ง Enter และ Space ต่างก็สั่งงานปุ่มนั้นได้ ทดสอบแป้นเหล่านั้นในอินเทอร์เฟซจริงด้วย แผนภาพที่มีหลายการทำงานอิสระต้องออกแบบการโต้ตอบแป้นพิมพ์ที่เหมาะกับการทำงานเหล่านั้น ปุ่มเดียวครอบทั้งหมดแทนทุกอย่างไม่ได้

การตั้ง pointer-events: none ยัง ไม่ใช่สถานะปิดใช้งาน มันไม่เอาตัวควบคุมที่โฟกัสได้ออกจากการนำทางแป้นพิมพ์ MDN อธิบายทั้ง โฟกัสแป้นพิมพ์และการส่งต่อเหตุการณ์: องค์ประกอบย่อยเลือกกลับมาเป็นเป้าหมายได้ และเหตุการณ์ของมันยังส่งผ่าน listener ขององค์ประกอบแม่ ใช้แอตทริบิวต์ disabled ของ HTML เมื่อต้องปิดปุ่ม

เมื่องานเริ่มต้นเป็น PNG

หากต้นฉบับมีเพียง PNG หรือ JPG แบนและอินเทอร์เฟซต้องการรูปทรงที่แก้แยกได้ กระบวนการแปลงภาพเป็นเวกเตอร์ของ PerfectVector เตรียม SVG สำหรับประเมินได้ เปรียบเทียบกับต้นฉบับ ตรวจช่องเปิดและพื้นที่สำคัญ และเลือกว่าส่วนใดควรมีเป้าหมายโต้ตอบแยก

การลากพาธให้รูปทรง แอปยังต้องมี ID ที่สื่อความหมาย ตัวจัดการการทำงาน ชื่อ พฤติกรรมโฟกัส และพื้นที่รับการคลิกที่ตั้งใจ เส้นรอบรูปที่ลากอาจละเอียดกว่าพื้นที่ที่ผู้ใช้ควรคลิกมาก สำหรับไอคอนเล็กในอินเทอร์เฟซ การวาดใหม่ด้วยมือหรือไฟล์หลักเวกเตอร์เดิมอาจดูแลง่ายกว่า คู่มือเตรียมไอคอน PNG อธิบายสิ่งที่ควรตรวจก่อนนำงานกู้คืนเข้า UI kit

หากไอคอนเป็นของตกแต่งในตัวควบคุมเพียงอย่างเดียว ไอคอนมาสก์ CSS อาจเหมาะกับพฤติกรรมสี ตัวควบคุมที่ครอบยังเป็นเจ้าของการทำงาน คู่มือแปลงเป็นเวกเตอร์ ที่กว้างขึ้นครอบคลุมว่าเมื่อใดการกู้พาธมีประโยชน์ตั้งแต่แรก

ตรวจพื้นที่ที่ตั้งใจก่อนส่งมอบ

ทดสอบขนาดแสดงจริง ไม่ใช่เฉพาะพรีวิวใหญ่ในโปรแกรมแก้ไข:

1. คลิกพื้นที่เติม เส้นขอบ ทุกช่องเปิด และมุมว่าง
2. ตรวจเป้าหมายเหตุการณ์เมื่อการทำงานผิดเกิดขึ้น
3. ตรวจสี่เหลี่ยมโปร่งใสหรือกรอบซ้อนที่ดักตัวชี้
4. ยืนยันว่าเป้าหมายข้างเคียงไม่ทับกันผิดคาด
5. ใช้ Tab, Enter และ Space ตามความเหมาะสมพร้อมโฟกัสที่เห็น
6. ทดสอบสัมผัสบนอุปกรณ์ที่อินเทอร์เฟซรองรับ

ชุดทดลองยืนยันรูปทรงเฉพาะเหล่านี้ในเบราว์เซอร์เดียว ไม่ได้ยืนยันพฤติกรรมทุกเบราว์เซอร์สำหรับมาสก์ การตัดภาพ ฟิลเตอร์ หรืองานนำเข้าซับซ้อน เพิ่มกรณีเหล่านั้นในการทดสอบเองหากงานใช้

หากขาดรูปทรงที่แก้ได้ ให้ ลองภาพต้นฉบับใน PerfectVector แล้วตรวจเส้นรอบรูปและช่องเปิด เมื่องานภาพถูกต้องแล้ว กำหนดและทดสอบพื้นที่โต้ตอบแยก

คำถามที่พบบ่อย

ทำไม SVG ตอบสนองเฉพาะเมื่อคลิกเส้นรอบรูป? ด้วยพฤติกรรมตัวชี้ SVG ปริยาย รูปทรงที่ไม่เติมอาจเป็นเป้าหมายเฉพาะเหนือเส้นขอบที่วาด ตรวจค่าเติมและการทำงานที่ตั้งใจ ใช้เป้าหมายที่กำหนดหรือปุ่ม/ลิงก์ HTML ที่ครอบเมื่อพื้นที่ว่างควรสั่งงานเดียวกัน

pointer-events="all" ทำให้ SVG ทั้งหมดคลิกได้ไหม? มันให้พื้นที่เติมและเส้นขอบขององค์ประกอบเป็นเป้าหมายโดยไม่สนค่าสีวาดหรือการมองเห็น ไม่ได้เปลี่ยนวิวพอร์ต SVG ทั้งหมดเป็นเป้าหมายอัตโนมัติ เพิ่มรูปทรงชัดเจนหรือใช้ตัวควบคุมที่ครอบเมื่อต้องการพื้นที่นั้น

สี่เหลี่ยมโปร่งใสรับคลิกได้ไหม? ได้ ความโปร่งใสไม่ได้หมายถึงไม่มีรูปทรงหรือสีเติม สี่เหลี่ยมโปร่งใสที่มีค่า pointer-events เหมาะสมเป็นเป้าหมายตั้งใจได้ แต่ดักคลิกโดยไม่ตั้งใจได้ด้วย

แปลงภาพเป็นเวกเตอร์แล้วได้ปุ่มที่เข้าถึงได้ไหม? ไม่ การแปลงให้รูปทรงแก้ได้จากราสเตอร์ ชื่อ พฤติกรรมแป้นพิมพ์ ตัวจัดการการทำงาน โฟกัส และพื้นที่โต้ตอบต้องสร้างและทดสอบในอินเทอร์เฟซ

แหล่งอ้างอิง

1. W3C — สคริปต์และการโต้ตอบ SVG 2 — นิยามเป้าหมายตัวชี้ SVG และรูปทรงที่ค่า pointer-events ใช้
2. W3C — การวาด SVG 2 — นิยามว่ากฎเติมกำหนดภายในและช่องเปิดพาธอย่างไร
3. MDN — pointer-events — อธิบายเป้าหมาย การส่งต่อ การสืบทอด และข้อจำกัดโฟกัสแป้นพิมพ์
4. MDN — องค์ประกอบ button — อธิบายพฤติกรรมปุ่ม HTML ชื่อ และสถานะปิดใช้งาน