Pointer events SVG: aree cliccabili adatte alla grafica

pointer-events SVG controlla quali parti di una grafica possono diventare il bersaglio di un evento del puntatore. Una forma riempita, un tratto sottile e un foro vuoto possono rispondere diversamente anche se appartengono alla stessa illustrazione. Imposta l'area sensibile in base all'azione che il lettore si aspetta, poi verifica gli spazi vuoti con la stessa attenzione delle parti colorate.

Questa guida riguarda grafica usata in un'interfaccia web: un diagramma selezionabile, un emblema cliccabile o un'icona dentro un pulsante. Se l'SVG contiene già tracciati utilizzabili, correggi direttamente il codice di interazione. La vettorializzazione entra nel flusso soltanto quando la geometria modificabile è ancora racchiusa in un PNG o JPG.

Parti dall'elemento che riceve il clic

Per SVG, il valore predefinito auto si comporta come visiblePainted. Una forma visibile può essere un bersaglio sul riempimento quando fill non è none, oppure sul tratto quando stroke non è none. La specifica SVG sull'interattività definisce queste regole di rilevamento.

Questo spiega un'icona apparentemente guasta: il suo listener può funzionare sul contorno ma ignorare il centro vuoto. Il browser verifica la forma, senza presumere che ogni punto nel rettangolo che la circonda abbia lo stesso significato.

Queste sono le scelte utili per questo flusso:

all non significa “ogni punto nel viewport SVG”. Si riferisce comunque alla geometria dell'elemento. Se vuoi che risponda un rettangolo specifico attorno a un disegno delicato, crea quel rettangolo esplicitamente.

Distingui anche colorazione trasparente da assenza di colorazione. fill="transparent" resta un valore di riempimento; fill="none" rimuove il riempimento. La sola opacità non è un modo affidabile per far ignorare i clic a una sovrapposizione.

Verifica un riempimento, un foro e un tratto aperto

Abbiamo costruito un piccolo laboratorio SVG inline con forme originali scritte a mano. Contiene un tracciato composto blu con un foro rettangolare, un tratto aperto arancione e una copia di quel tratto sopra un bersaglio trasparente separato. Sono esempi didattici, non risultati di conversione PerfectVector.

Nel test nel browser, fare clic sulla fascia blu registrava ring. Fare clic sul suo centro vuoto registrava ring-stage, l'SVG che la contiene. La linea arancione registrava trail, mentre lo spazio sotto il suo vertice registrava stroke-stage. Nel terzo pannello, entrambe le posizioni registravano hit.

Il tracciato blu usa due sottotracciati rettangolari e 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>

Il rettangolo interno è fuori dalla regione riempita secondo la regola di riempimento pari-dispari. È un foro reale. Un rettangolo bianco sovrapposto sarebbe un'altra forma colorata con un proprio comportamento ai clic. Se la geometria stessa è sbagliata, usa la guida alla riparazione dei fori SVG prima di cambiare le regole degli eventi.

Questo è il tratto aperto del secondo pannello:

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

Per un test rapido, inserisci uno dei due frammenti in un file HTML con questo logger subito dopo. Dai all'SVG una dimensione visibile, per esempio 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>

Fai clic sulla regione colorata, su un interno vuoto e su un angolo fuori dal disegno. Registrare event.target distingue un clic sul tracciato da un clic che ha semplicemente raggiunto il contenitore SVG. Questi esempi verificano la selezione del bersaglio; non sono controlli interattivi completi.

Aggiungi un bersaglio senza ispessire la grafica

Supponiamo che tutta l'area attorno al percorso arancione debba selezionarlo. Aumentare il suo tratto visibile cambierebbe l'illustrazione. Un bersaglio separato permette all'area di interazione di avere una geometria propria:

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

Il rettangolo si trova dietro la grafica. Il tracciato arancione ignora la selezione come bersaglio del puntatore, quindi il rettangolo può ricevere clic attraverso di esso. Le sue coordinate definiscono esplicitamente il bersaglio previsto; i dati del tracciato visibile restano identici al secondo pannello.

È utile per una regione di un diagramma o una linea sottile difficile da puntare. Evita che i bersagli si sovrappongano a controlli non correlati e decidi cosa deve succedere dove due regioni si incontrano. Una forma invisibile più grande può intercettare i clic di una vicina con la stessa facilità di una forma visibile.

Per un'icona semplice che esegue un'unica azione, un pulsante HTML nativo spesso fornisce il bersaglio necessario senza aggiungere alcun rettangolo SVG.

Mantieni l'attivazione da tastiera sul controllo

La selezione del bersaglio del puntatore non fornisce un'etichetta, l'attivazione da tastiera o la semantica di un pulsante. Inserisci un'icona con una sola azione dentro un pulsante HTML con un nome e mantieni decorativa la grafica:

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

L'elemento pulsante nativo fornisce il comportamento del controllo; il testo visibile fornisce il nome. Mantieni un indicatore di focus visibile. Usa un link reale quando l'azione porta a un'altra pagina.

Nel nostro laboratorio, Tab portava il focus al pulsante, poi Invio e Spazio lo attivavano ciascuno. Verifica questi tasti anche nell'interfaccia reale. Un diagramma con più azioni indipendenti richiede un progetto di interazione da tastiera adatto a quelle azioni; un unico pulsante contenitore non può rappresentarle tutte.

Impostare pointer-events: none non è nemmeno uno stato disabilitato. Non rimuove dalla navigazione da tastiera un controllo che altrimenti può ricevere focus. MDN documenta sia il focus da tastiera sia la propagazione degli eventi: i discendenti possono riattivare la selezione come bersaglio e i loro eventi possono comunque passare attraverso il listener di un genitore. Usa l'attributo nativo disabled quando un pulsante deve essere disabilitato.

Quando la grafica iniziale è un PNG

Se l'unica sorgente è un PNG o JPG piatto e l'interfaccia richiede forme modificabili indipendentemente, il flusso da immagine a vettore di PerfectVector può preparare un candidato SVG. Confrontalo con l'originale, controlla fori e regioni importanti e decidi quali parti meritano bersagli di interazione separati.

Il ricalco fornisce geometria. L'applicazione ha ancora bisogno di ID significativi, gestori delle azioni, nomi, comportamento del focus e aree sensibili deliberate. Un contorno visivo ricalcato può essere molto più dettagliato della regione su cui l'utente dovrebbe fare clic. Per una piccola icona d'interfaccia, un ridisegno manuale o un originale vettoriale esistente può essere più facile da mantenere. La guida alla preparazione delle icone PNG spiega cosa controllare prima di portare grafica ricostruita in un kit UI.

Se l'icona è soltanto decorativa dentro un controllo, un'icona con maschera CSS può adattarsi al comportamento del colore; il controllo che la contiene continua a gestire l'azione. La guida alla vettorializzazione spiega quando ricostruire i tracciati è utile in primo luogo.

Verifica l'area prevista prima della pubblicazione

Verifica alla dimensione effettivamente visualizzata, non soltanto in una grande anteprima dell'editor:

1. Fai clic su una regione riempita, un tratto, ogni foro e gli angoli vuoti.
2. Controlla il bersaglio dell'evento quando si attiva l'azione sbagliata.
3. Cerca rettangoli trasparenti o sovrapposizioni che intercettano il puntatore.
4. Conferma che i bersagli vicini non si sovrappongano in modo inatteso.
5. Usa Tab, Invio e Spazio dove appropriato, con focus visibile.
6. Verifica l'interazione touch sui dispositivi supportati dall'interfaccia.

Il laboratorio verifica queste forme specifiche in un browser. Non dimostra il comportamento di ogni browser per maschere, ritagli, filtri o grafica importata complessa. Aggiungi questi casi ai tuoi test se il progetto li usa.

Se manca la geometria modificabile, prova l'immagine sorgente in PerfectVector, poi controlla contorni e fori. Una volta che la grafica è corretta, definisci e verifica separatamente l'area di interazione.

FAQ

Perché il mio SVG risponde solo quando faccio clic sul contorno? Con il comportamento predefinito del puntatore SVG, una forma senza riempimento può essere bersaglio soltanto nella regione del tratto presente. Controlla il valore di riempimento e l'azione prevista. Usa un bersaglio deliberato o un controllo nativo contenitore quando lo spazio vuoto deve attivare la stessa azione.

pointer-events="all" rende cliccabile tutto l'SVG? Rende bersaglio le regioni di riempimento e tratto dell'elemento indipendentemente dai loro valori di colorazione o visibilità. Non trasforma automaticamente l'intero viewport SVG in un bersaglio. Aggiungi una forma esplicita o usa un controllo contenitore quando serve quell'area.

Un rettangolo trasparente può ricevere clic? Sì. La trasparenza non significa che il rettangolo non abbia geometria o riempimento. Un rettangolo trasparente con un valore pointer-events appropriato può fungere da bersaglio deliberato, ma può anche intercettare clic accidentalmente.

Vettorializzare un'immagine crea pulsanti accessibili? No. La vettorializzazione può produrre geometria modificabile da grafica raster. Nomi, comportamento da tastiera, gestori delle azioni, focus e regioni di interazione devono essere implementati e verificati nell'interfaccia.

Fonti

1. W3C — Scripting e interattività SVG 2 — Definisce i bersagli del puntatore SVG e la geometria usata dai valori pointer-events.
2. W3C — Colorazione SVG 2 — Definisce come le regole di riempimento determinano interno e fori di un tracciato.
3. MDN — pointer-events — Spiega selezione del bersaglio, propagazione, ereditarietà e limiti del focus da tastiera.
4. MDN — L'elemento button — Documenta comportamento nativo del pulsante, nome e stato disabilitato.