Eventos de ponteiro SVG: ajuste as áreas de clique à arte

pointer-events no SVG controla quais partes de um gráfico podem se tornar o alvo de um evento de ponteiro. Uma forma preenchida, um contorno fino e um vazado podem responder de maneiras diferentes mesmo quando pertencem à mesma ilustração. Defina a área de interação para corresponder à ação que o leitor espera e teste os espaços vazios com o mesmo cuidado que as partes coloridas.

Este guia é para arte usada em uma interface web: um diagrama selecionável, um emblema clicável ou um ícone dentro de um botão. Se o SVG já contém traçados utilizáveis, corrija diretamente seu código de interação. A vetorização só entra no fluxo quando a geometria editável ainda está presa em um PNG ou JPG.

Comece pelo elemento que recebe o clique

Para SVG, o valor padrão auto se comporta como visiblePainted. Uma forma visível pode ser alvo sobre seu preenchimento quando fill não é none, ou sobre seu contorno quando stroke não é none. A especificação de interatividade SVG define essas regras de detecção de alvos.

Isso explica um ícone aparentemente quebrado: seu manipulador pode funcionar na borda, mas não no centro vazio. O navegador está testando a forma, sem supor que todos os pontos dentro de seu retângulo ao redor significam a mesma coisa.

Estas são as escolhas úteis para esse fluxo:

all não significa “todos os pontos da área de visualização SVG”. Ele ainda se refere à geometria do elemento. Se você quer que um retângulo específico ao redor de um desenho delicado responda, crie esse retângulo deliberadamente.

Diferencie também pintura transparente de ausência de pintura. fill="transparent" ainda é um valor de preenchimento; fill="none" remove o preenchimento. A opacidade, sozinha, não é uma maneira confiável de fazer uma sobreposição ignorar cliques.

Teste um preenchimento, um vazado e um contorno aberto

Construímos um pequeno laboratório SVG inline com formas originais feitas manualmente. Ele contém um traçado composto azul com um vazado retangular, um contorno aberto laranja e uma cópia desse contorno sobre um alvo transparente separado. São exemplos didáticos, não resultados de conversão do PerfectVector.

No teste no navegador, clicar na faixa azul registrou ring. Clicar em seu centro vazio registrou ring-stage, o SVG que o contém. A linha laranja registrou trail, enquanto o espaço abaixo de seu pico registrou stroke-stage. No terceiro painel, os dois locais registraram hit.

O traçado azul usa dois subtraçados retangulares 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>

O retângulo interno fica fora da região preenchida pela regra de preenchimento par-ímpar. Ele é um vazado real. Um retângulo branco colocado por cima seria outra forma pintada, com seu próprio comportamento de interação. Se a própria geometria está errada, use o guia de reparo de vazados SVG antes de alterar as regras de eventos.

Aqui está o contorno aberto do segundo painel:

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

Para um teste rápido, coloque qualquer um dos trechos em um arquivo HTML com este registrador depois dele. Dê ao SVG um tamanho visível, como 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>

Clique na região pintada, em um interior vazio e em um canto fora do desenho. Registrar event.target distingue um acerto no traçado de um clique que apenas chegou ao contêiner SVG. Esses exemplos testam a seleção do alvo; não são controles interativos finalizados.

Adicione um alvo sem engrossar a arte

Suponha que toda a área ao redor da trilha laranja deva selecionar essa trilha. Aumentar seu contorno visível alteraria a ilustração. Um alvo separado permite que a área de interação tenha sua própria geometria:

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

O retângulo fica atrás da arte. O traçado laranja ignora a seleção de alvo por ponteiro, então o retângulo pode receber cliques através dele. Suas coordenadas definem explicitamente o alvo pretendido; os dados do traçado visível continuam idênticos aos do segundo painel.

Isso é útil para uma região de diagrama ou uma linha fina difícil de apontar. Evite que os alvos se sobreponham a controles sem relação com eles e decida o que deve acontecer onde duas regiões se encontram. Uma forma invisível maior pode interceptar os cliques de um vizinho tão facilmente quanto uma forma visível.

Para um ícone simples que executa uma única ação, um botão HTML nativo frequentemente fornece o alvo de que você precisa sem adicionar nenhum retângulo SVG.

Mantenha a ativação por teclado no controle

A seleção de alvo por ponteiro não fornece um rótulo, ativação por teclado nem semântica de botão. Coloque um ícone de ação única dentro de um botão HTML com nome e mantenha a arte decorativa:

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

O elemento button nativo fornece o comportamento do controle; o texto visível fornece seu nome. Mantenha um indicador de foco visível. Use um link real quando a ação navegar para outra página.

No nosso laboratório, Tab colocou o foco no botão, e Enter e Espaço o ativaram, cada um por vez. Teste essas teclas também na sua interface real. Um diagrama com várias ações independentes precisa de um desenho adequado de interação por teclado para essas ações; um único botão ao redor não pode representar todas elas.

Definir pointer-events: none também não é um estado desativado. Isso não remove da navegação por teclado um controle que, de outra forma, pode receber foco. A MDN documenta tanto o foco por teclado quanto a propagação de eventos: descendentes podem voltar a permitir a seleção como alvo, e seus eventos ainda podem passar por um manipulador no pai. Use o atributo nativo disabled quando um botão precisar ser desativado.

Quando a arte inicial é um PNG

Se a única imagem original é um PNG ou JPG de imagem plana e sua interface precisa de formas editáveis de maneira independente, o fluxo de imagem para vetor do PerfectVector pode preparar uma versão candidata em SVG. Compare-a com o original, inspecione os vazados e regiões importantes e decida quais partes merecem alvos de interação separados.

A vetorização fornece geometria. Seu aplicativo ainda precisa de IDs significativos, manipuladores de ações, nomes, comportamento de foco e áreas de interação deliberadas. Um contorno visual vetorizado pode ser muito mais detalhado que a região em que o usuário deve clicar. Para um pequeno ícone de interface, redesenhar manualmente ou usar um mestre vetorial existente pode ser mais fácil de manter. O guia de preparação de ícones PNG explica o que inspecionar antes de levar uma arte recuperada para um kit de interface.

Se o ícone é apenas decorativo dentro de um controle, um ícone com máscara CSS pode atender ao comportamento de cor; o controle ao redor continua responsável pela ação. O guia mais amplo de vetorização aborda quando recuperar traçados é útil em primeiro lugar.

Verifique a área pretendida antes da entrega

Teste o tamanho real de exibição, não apenas uma prévia grande no editor:

1. Clique em uma região preenchida, em um contorno, em cada vazado e em cantos vazios.
2. Inspecione o alvo do evento quando a ação errada for executada.
3. Confira se retângulos transparentes ou sobreposições interceptam o ponteiro.
4. Confirme que alvos vizinhos não se sobrepõem inesperadamente.
5. Use Tab, Enter e Espaço onde for adequado, com foco visível.
6. Teste a interação por toque nos dispositivos compatíveis com sua interface.

O laboratório verifica essas formas específicas em um navegador. Ele não comprova o comportamento de todos os navegadores para máscaras, recortes, filtros ou artes importadas complexas. Adicione esses casos ao seu teste se seu desenho os usar.

Se a geometria editável está ausente, experimente sua imagem de origem no PerfectVector e inspecione seus contornos e vazados. Quando a arte estiver correta, defina e teste a área de interação separadamente.

Perguntas frequentes

Por que meu SVG só responde quando clico na borda? Com o comportamento padrão de ponteiro do SVG, uma forma sem preenchimento pode ser alvo apenas sobre seu contorno pintado. Confira o valor do preenchimento e a ação pretendida. Use um alvo deliberado ou um controle nativo ao redor quando o espaço vazio deve ativar a mesma ação.

pointer-events="all" torna o SVG inteiro clicável? Ele usa como alvo as regiões de preenchimento e contorno do elemento, independentemente dos valores de pintura ou visibilidade. Ele não transforma automaticamente toda a área de visualização SVG em um alvo. Adicione uma forma explícita ou use um controle ao redor quando precisar dessa área.

Um retângulo transparente pode receber cliques? Sim. Transparência não significa que o retângulo não tem geometria ou preenchimento. Um retângulo transparente com um valor adequado de pointer-events pode funcionar como alvo deliberado, mas também pode interceptar cliques por acidente.

Vetorizar uma imagem cria botões acessíveis? Não. A vetorização pode produzir geometria editável a partir de uma arte raster. Nomes, comportamento por teclado, manipuladores de ações, foco e regiões de interação precisam ser implementados e testados na interface.

Fontes

1. W3C — scripts e interatividade em SVG 2 — Define a seleção de alvos por ponteiro no SVG e a geometria usada pelos valores de pointer-events.
2. W3C — pintura em SVG 2 — Define como as regras de preenchimento determinam o interior e os vazados de um traçado.
3. MDN — pointer-events — Explica seleção de alvos, propagação, herança e limitações de foco por teclado.
4. MDN — elemento button — Documenta o comportamento de botão nativo, seu nome e o estado desativado.