Pointer Events SVG: Sesuaikan Area Klik dengan Artwork Anda

pointer-events SVG mengendalikan bagian grafis mana yang dapat menjadi target event pointer. Bentuk berisian, stroke tipis, dan lubang kosong dapat merespons berbeda meskipun berada dalam ilustrasi yang sama. Tetapkan area klik agar sesuai dengan tindakan yang diharapkan pembaca, lalu uji ruang kosong secermat bagian berwarna.

Panduan ini untuk artwork yang digunakan dalam antarmuka web: diagram yang dapat dipilih, lambang yang dapat diklik, atau ikon di dalam tombol. Jika SVG sudah berisi path yang dapat digunakan, perbaiki kode interaksinya secara langsung. Vektorisasi hanya masuk ke alur kerja ketika geometri yang dapat diedit masih terperangkap dalam PNG atau JPG.

Mulai dengan elemen yang menerima klik

Untuk SVG, nilai auto default berperilaku seperti visiblePainted. Bentuk yang terlihat dapat ditargetkan pada isiannya ketika fill bukan none, atau pada stroke-nya ketika stroke bukan none. Spesifikasi interaktivitas SVG mendefinisikan aturan hit-testing ini.

Itu menjelaskan ikon yang tampaknya rusak: listener-nya mungkin berfungsi pada outline tetapi melewatkan pusat kosong. Browser menguji bentuk, bukan menganggap setiap titik dalam persegi panjang di sekitarnya berarti hal yang sama.

Berikut pilihan yang berguna untuk alur kerja ini:

all tidak berarti “setiap titik dalam viewport SVG.” Nilai ini tetap merujuk pada geometri elemen. Jika Anda ingin persegi panjang tertentu di sekitar gambar tipis merespons, buat persegi panjang itu secara sengaja.

Bedakan juga pewarnaan transparan dari tanpa pewarnaan. fill="transparent" masih merupakan nilai isian; fill="none" menghapus isian. Opacity saja bukan cara yang andal untuk membuat lapisan mengabaikan klik.

Uji isian, lubang, dan stroke terbuka

Kami membangun lab SVG inline kecil dengan bentuk orisinal buatan tangan. Lab berisi compound path biru dengan lubang persegi panjang, stroke terbuka oranye, dan salinan stroke tersebut di atas target transparan terpisah. Ini adalah contoh pembelajaran, bukan hasil konversi PerfectVector.

Dalam pengujian browser, mengeklik pita biru mencatat ring. Mengeklik pusat kosongnya mencatat ring-stage, SVG yang menampungnya. Garis oranye mencatat trail, sementara ruang di bawah puncaknya mencatat stroke-stage. Pada panel ketiga, kedua lokasi mencatat hit.

Path biru menggunakan dua subpath persegi panjang dan 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>

Persegi panjang dalam berada di luar wilayah berisian menurut aturan isian even-odd. Itu merupakan lubang sungguhan. Persegi panjang putih yang dilapiskan di atasnya akan menjadi bentuk berwarna lain dengan perilaku klik sendiri. Jika geometrinya sendiri salah, gunakan panduan perbaikan lubang SVG sebelum mengubah aturan event.

Berikut stroke terbuka dari panel kedua:

<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>

Untuk pengujian cepat, letakkan salah satu cuplikan dalam file HTML dengan logger ini setelahnya. Berikan ukuran terlihat pada SVG, seperti 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>

Klik wilayah berwarna, bagian dalam kosong, dan sudut di luar gambar. Mencatat event.target membedakan klik path dari klik yang hanya mencapai kontainer SVG. Contoh ini menguji pemilihan target; contoh bukan kontrol interaktif yang sudah selesai.

Tambahkan target klik tanpa menebalkan artwork

Misalkan seluruh area di sekitar jalur oranye harus memilih jalur tersebut. Meningkatkan stroke yang terlihat akan mengubah ilustrasi. Target terpisah memungkinkan area interaksi memiliki geometrinya sendiri:

<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>

Persegi panjang berada di belakang artwork. Path oranye mengabaikan penargetan pointer, sehingga persegi panjang dapat menerima klik menembusnya. Koordinatnya mendefinisikan target yang dimaksudkan secara eksplisit; data path terlihat tetap identik dengan panel kedua.

Ini berguna untuk wilayah diagram atau garis tipis yang sulit ditunjuk. Jaga agar target tidak tumpang tindih dengan kontrol tak terkait, dan tentukan apa yang harus terjadi ketika dua wilayah bertemu. Bentuk tak terlihat yang lebih besar dapat mencegat klik tetangga semudah bentuk yang terlihat.

Untuk ikon sederhana yang melakukan satu tindakan, tombol HTML native sering menyediakan target yang Anda perlukan tanpa menambahkan persegi panjang SVG sama sekali.

Pertahankan aktivasi keyboard pada kontrol

Penargetan pointer tidak menyediakan label, aktivasi keyboard, atau semantik tombol. Letakkan ikon satu tindakan di dalam tombol HTML bernama dan jadikan artwork dekoratif:

<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>

Elemen tombol native menyediakan perilaku kontrol; teks yang terlihat menyediakan namanya. Pertahankan indikator fokus yang terlihat. Gunakan tautan sungguhan ketika tindakan menavigasi ke halaman lain.

Dalam lab kami, Tab memfokuskan tombol, lalu Enter dan Space masing-masing mengaktifkannya. Uji tombol keyboard tersebut dalam antarmuka Anda yang sebenarnya juga. Diagram dengan beberapa tindakan mandiri membutuhkan desain interaksi keyboard yang sesuai untuk tindakan tersebut; satu tombol yang mengelilinginya tidak dapat merepresentasikan semuanya.

Mengatur pointer-events: none juga bukan keadaan nonaktif. Pengaturan itu tidak menghapus kontrol yang dapat difokuskan dari navigasi keyboard. MDN mendokumentasikan fokus keyboard dan propagasi event: turunan dapat kembali mengaktifkan penargetan, dan event-nya masih dapat melewati listener induk. Gunakan atribut native disabled ketika tombol harus dinonaktifkan.

Ketika artwork awal berupa PNG

Jika satu-satunya sumber adalah PNG atau JPG datar dan antarmuka Anda membutuhkan bentuk yang dapat diedit secara mandiri, alur kerja gambar-ke-vektor PerfectVector dapat menyiapkan kandidat SVG. Bandingkan dengan sumber asli, periksa lubang dan wilayah penting, dan tentukan bagian mana yang membutuhkan target interaksi terpisah.

Penelusuran menyediakan geometri. Aplikasi Anda tetap membutuhkan ID bermakna, handler tindakan, nama, perilaku fokus, dan area klik yang disengaja. Outline visual yang ditelusuri mungkin jauh lebih terperinci daripada wilayah yang seharusnya diklik pengguna. Untuk ikon antarmuka kecil, gambar ulang manual atau master vektor yang sudah ada mungkin lebih mudah dipelihara. Panduan persiapan ikon PNG menjelaskan apa yang perlu diperiksa sebelum membawa artwork yang dipulihkan ke kit UI.

Jika ikon hanya dekoratif di dalam kontrol, ikon mask CSS mungkin sesuai dengan perilaku warnanya; kontrol yang mengelilinginya tetap menangani tindakan. Panduan vektorisasi yang lebih luas membahas kapan pemulihan path berguna sejak awal.

Verifikasi area yang dimaksudkan sebelum merilis

Uji ukuran tampilan sebenarnya, bukan hanya pratinjau editor besar:

1. Klik wilayah berisian, stroke, setiap lubang, dan sudut kosong.
2. Periksa target event ketika tindakan yang salah dijalankan.
3. Periksa persegi panjang transparan atau lapisan yang mencegat pointer.
4. Pastikan target tetangga tidak tumpang tindih secara tak terduga.
5. Gunakan Tab, Enter, dan Space jika sesuai, dengan fokus terlihat.
6. Uji interaksi sentuh pada perangkat yang didukung antarmuka Anda.

Lab memverifikasi bentuk khusus ini dalam satu browser. Lab tidak membuktikan perilaku setiap browser untuk mask, clipping, filter, atau artwork impor kompleks. Tambahkan kasus tersebut ke pengujian Anda sendiri jika desain menggunakannya.

Jika geometri yang dapat diedit tidak tersedia, coba gambar sumber Anda di PerfectVector, lalu periksa kontur dan lubangnya. Setelah artwork benar, definisikan dan uji area interaksi secara terpisah.

FAQ

Mengapa SVG saya hanya merespons ketika saya mengeklik outline-nya? Dengan perilaku pointer SVG default, bentuk tanpa isian mungkin hanya ditargetkan pada stroke berwarnanya. Periksa nilai isian dan tindakan yang dimaksudkan. Gunakan target klik yang disengaja atau kontrol native yang mengelilinginya ketika ruang kosong seharusnya mengaktifkan tindakan yang sama.

Apakah pointer-events="all" membuat seluruh SVG dapat diklik? Nilai ini menargetkan wilayah isian dan stroke elemen tanpa memandang nilai pewarnaan atau visibilitasnya. Nilai ini tidak otomatis mengubah seluruh viewport SVG menjadi target. Tambahkan bentuk eksplisit atau gunakan kontrol yang mengelilinginya ketika Anda membutuhkan area tersebut.

Dapatkah persegi panjang transparan menerima klik? Ya. Transparansi tidak berarti persegi panjang tidak memiliki geometri atau isian. Persegi panjang transparan dengan nilai pointer-events yang sesuai dapat berfungsi sebagai target klik yang disengaja, tetapi juga dapat mencegat klik secara tidak sengaja.

Apakah memvektorisasi gambar membuat tombol aksesibel? Tidak. Vektorisasi dapat menghasilkan geometri yang dapat diedit dari artwork raster. Nama, perilaku keyboard, handler tindakan, fokus, dan wilayah interaksi harus diimplementasikan dan diuji dalam antarmuka.

Sources

1. W3C — Scripting dan Interaktivitas SVG 2 — Mendefinisikan penargetan pointer SVG dan geometri yang digunakan nilai pointer-events.
2. W3C — Pewarnaan SVG 2 — Mendefinisikan bagaimana aturan isian menentukan bagian dalam dan lubang path.
3. MDN — pointer-events — Menjelaskan penargetan, propagasi, pewarisan, dan keterbatasan fokus keyboard.
4. MDN — Elemen button — Mendokumentasikan perilaku tombol native, penamaan, dan keadaan nonaktif.