Eventos de puntero SVG: adapta las áreas de clic a tu ilustración

pointer-events en SVG controla qué partes de un gráfico pueden convertirse en el destino de un evento de puntero. Una forma rellena, un trazo fino y un hueco vacío pueden responder de manera diferente aunque pertenezcan a la misma ilustración. Define el área sensible según la acción que espera el lector y prueba los espacios vacíos con el mismo cuidado que los coloreados.

Esta guía trata de ilustraciones usadas en una interfaz web: un diagrama seleccionable, un emblema pulsable o un icono dentro de un botón. Si el SVG ya contiene trazados utilizables, corrige directamente su código de interacción. La vectorización solo entra en el flujo cuando la geometría editable sigue atrapada en un PNG o JPG.

Empieza por el elemento que recibe el clic

En SVG, el valor predeterminado auto se comporta como visiblePainted. Una forma visible puede recibir eventos sobre su relleno cuando fill no es none, o sobre su trazo cuando stroke no es none. La especificación de interactividad SVG define estas reglas de detección.

Esto explica un icono que parece averiado: su controlador puede funcionar en el contorno, pero no en el centro vacío. El navegador comprueba la forma; no supone que todos los puntos dentro del rectángulo que la rodea signifiquen lo mismo.

Estas son las opciones útiles para este flujo:

all no significa «todos los puntos del área visible del SVG». Sigue refiriéndose a la geometría del elemento. Si quieres que responda un rectángulo concreto alrededor de un dibujo delicado, crea ese rectángulo expresamente.

Distingue también entre pintura transparente y ausencia de pintura. fill="transparent" sigue siendo un valor de relleno; fill="none" elimina el relleno. La opacidad por sí sola no es una forma fiable de hacer que una superposición ignore los clics.

Prueba un relleno, un hueco y un trazo abierto

Creamos un pequeño laboratorio de SVG en línea con formas originales dibujadas manualmente. Contiene un trazado compuesto azul con un hueco rectangular, un trazo abierto naranja y una copia de ese trazo sobre un objetivo transparente independiente. Son ejemplos didácticos, no resultados de conversión de PerfectVector.

En la prueba de navegador, pulsar la banda azul registró ring. Pulsar su centro vacío registró ring-stage, el SVG que la contiene. La línea naranja registró trail, mientras que el espacio bajo su pico registró stroke-stage. En el tercer panel, ambas ubicaciones registraron hit.

El trazado azul usa dos subtrazados rectangulares y 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>

El rectángulo interior queda fuera de la región rellena según la regla de relleno par-impar. Es un hueco real. Un rectángulo blanco colocado encima sería otra forma pintada con su propio comportamiento de detección. Si la propia geometría es incorrecta, usa la guía de reparación de huecos SVG antes de cambiar las reglas de eventos.

Este es el trazo abierto del segundo panel:

<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 una prueba rápida, coloca cualquiera de los fragmentos en un archivo HTML con este registrador después. Dale al SVG un tamaño visible, por ejemplo 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>

Pulsa la región pintada, un interior vacío y una esquina fuera del dibujo. Registrar event.target distingue entre alcanzar un trazado y un clic que simplemente llega al contenedor SVG. Estos ejemplos prueban la selección del destino; no son controles interactivos terminados.

Añade un objetivo de clic sin engrosar la ilustración

Supongamos que toda el área alrededor del recorrido naranja debe seleccionarlo. Aumentar su trazo visible cambiaría la ilustración. Un objetivo independiente permite que el área de interacción tenga su propia geometría:

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

El rectángulo está detrás de la ilustración. El trazado naranja ignora la detección del puntero, por lo que el rectángulo puede recibir clics a través de él. Sus coordenadas definen explícitamente el objetivo previsto; los datos del trazado visible siguen siendo idénticos a los del segundo panel.

Esto es útil para una región de diagrama o una línea fina difícil de señalar. Evita que los objetivos se superpongan con controles ajenos y decide qué debe ocurrir donde se encuentran dos regiones. Una forma invisible más grande puede interceptar los clics de un vecino con la misma facilidad que una forma visible.

Para un icono sencillo que realiza una sola acción, un botón HTML nativo suele proporcionar el objetivo necesario sin añadir ningún rectángulo SVG.

Mantén la activación por teclado en el control

La detección del puntero no proporciona una etiqueta, activación por teclado ni semántica de botón. Coloca un icono de una sola acción dentro de un botón HTML con nombre y mantén la ilustración como 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>

El elemento button nativo proporciona el comportamiento del control; el texto visible proporciona su nombre. Mantén un indicador de foco visible. Usa un enlace real cuando la acción lleve a otra página.

En nuestro laboratorio, Tab enfocó el botón y después Intro y Espacio lo activaron, cada una por separado. Prueba esas teclas también en tu interfaz real. Un diagrama con varias acciones independientes necesita un diseño de interacción por teclado adecuado para ellas; un único botón envolvente no puede representarlas todas.

Establecer pointer-events: none tampoco es un estado deshabilitado. No elimina de la navegación por teclado un control que puede recibir foco. MDN documenta tanto el foco por teclado como la propagación de eventos: los descendientes pueden volver a habilitar la detección y sus eventos pueden seguir pasando por un controlador del padre. Usa el atributo nativo disabled cuando un botón deba estar deshabilitado.

Cuando la ilustración inicial es un PNG

Si el único original es un PNG o JPG plano y tu interfaz necesita formas editables de manera independiente, el flujo de imagen a vector de PerfectVector puede preparar una primera versión SVG. Compárala con el original, inspecciona los huecos y regiones importantes y decide qué partes merecen objetivos de interacción separados.

La vectorización proporciona geometría. Tu aplicación sigue necesitando IDs significativos, controladores de acciones, nombres, comportamiento de foco y áreas sensibles deliberadas. Un contorno visual vectorizado puede ser mucho más detallado que la región donde debería pulsar el usuario. Para un icono pequeño de interfaz, un redibujo manual o un archivo maestro vectorial existente puede ser más fácil de mantener. La guía de preparación de iconos PNG explica qué inspeccionar antes de incorporar la ilustración recuperada a un kit de interfaz.

Si el icono es simplemente decorativo dentro de un control, un icono con máscara CSS puede encajar con su comportamiento de color; el control que lo rodea sigue siendo responsable de la acción. La guía general de vectorización explica cuándo resulta útil recuperar trazados en primer lugar.

Verifica el área prevista antes de publicar

Prueba el tamaño real de visualización, no solo una vista previa grande del editor:

1. Pulsa una región rellena, un trazo, cada hueco y las esquinas vacías.
2. Inspecciona el destino del evento cuando se ejecute la acción equivocada.
3. Busca rectángulos transparentes o superposiciones que intercepten el puntero.
4. Confirma que los objetivos vecinos no se superpongan de forma inesperada.
5. Usa Tab, Intro y Espacio cuando corresponda, con foco visible.
6. Prueba la interacción táctil en los dispositivos compatibles con tu interfaz.

El laboratorio verifica estas formas concretas en un navegador. No establece el comportamiento de todos los navegadores para máscaras, recortes, filtros o ilustraciones importadas complejas. Añade esos casos a tu propia prueba si tu diseño los usa.

Si falta la geometría editable, prueba tu imagen original en PerfectVector e inspecciona sus contornos y huecos. Cuando la ilustración esté correcta, define y prueba el área de interacción por separado.

Preguntas frecuentes

¿Por qué mi SVG solo responde cuando pulso su contorno? Con el comportamiento predeterminado del puntero SVG, una forma sin relleno puede recibir eventos solo sobre su trazo pintado. Comprueba el valor del relleno y la acción prevista. Usa un objetivo de clic deliberado o un control nativo envolvente cuando el espacio vacío deba activar la misma acción.

¿pointer-events="all" hace que todo el SVG sea pulsable? Detecta las regiones de relleno y trazo del elemento independientemente de sus valores de pintura o visibilidad. No convierte automáticamente toda el área visible del SVG en un objetivo. Añade una forma explícita o usa un control envolvente cuando necesites esa área.

¿Puede un rectángulo transparente recibir clics? Sí. La transparencia no significa que el rectángulo carezca de geometría o relleno. Un rectángulo transparente con un valor de pointer-events adecuado puede servir como objetivo de clic deliberado, pero también puede interceptar clics por accidente.

¿Vectorizar una imagen crea botones accesibles? No. La vectorización puede producir geometría editable a partir de una ilustración rasterizada. Los nombres, el comportamiento por teclado, los controladores de acciones, el foco y las regiones de interacción deben implementarse y probarse en la interfaz.

Fuentes

1. W3C — scripts e interactividad de SVG 2 — Define la detección del puntero SVG y la geometría usada por los valores de pointer-events.
2. W3C — pintura de SVG 2 — Define cómo las reglas de relleno determinan el interior y los huecos de un trazado.
3. MDN — pointer-events — Explica la detección, la propagación, la herencia y las limitaciones de foco por teclado.
4. MDN — elemento button — Documenta el comportamiento, los nombres y el estado deshabilitado de los botones nativos.