2

Tengo el siguiente SVG inline dentro de mi página web:

<svg xmlns="http://www.w3.org/2000/svg" data-action="counter" class="button"
     width="320" height="90" viewBox="0 0 320 90">
  <rect x="0" y="0" width="320" height="82" rx="10" ry="10" fill="#114477" />
  <text alignment-baseline="central" text-anchor="middle" 
        x="160" y="41" font-size="48" fill="#c1cedb">Botón</text> 
</svg>

Quiero que, no importa dónde pulse el usuario en el SVG, se lance una función que controle el evento y para eso tengo el siguiente JavaScript:

document.querySelector(".button").addEventListener("click", function() {
  console.log(this.dataset.action);
});

El problema está en que parece que siempre me devuelve un error porque JavaScript dice que dataset no está definido para el elemento seleccionado:

document.querySelector(".button").addEventListener("click", function() {
  console.log(this.dataset.action);
});
<svg xmlns="http://www.w3.org/2000/svg" data-action="counter" class="button"
     width="320" height="90" viewBox="0 0 320 90">
  <rect x="0" y="0" width="320" height="82" rx="10" ry="10" fill="#114477" />
  <text x="160" y="41" alignment-baseline="central" text-anchor="middle" font-size="48" fill="#c1cedb">Botón</text> 
</svg>

El mismo código pero para otro elemento HTML (p.e. un div) funciona sin problemas. Traté de mover el atributo data-action al rect (cambiando el selector) pero recibo el mismo error. ¿Qué es lo que falla?¿Cómo puedo seleccionar un data-atributo en SVG desde JavaScript?

3
  • he probado el código que comentas y a mi me funciona perfectamente. Te dejo el enlace aquí
    – eledgaar
    Commented el 23 ago. 2016 a las 11:54
  • @eledgaar ese codepen me da el siguiente error en la consola: "pen.js:2 Uncaught TypeError: Cannot read property 'action' of undefined" que es el mismo que recibo cuando ejecuto el código de arriba. Y me da el mismo fallo en Internet Explorer 11, Edge, Firefox y Chrome
    – Alvaro Montoro
    Commented el 23 ago. 2016 a las 12:03
  • El problema es que dataset es parte del spec de HTMLElement y tu estas usando un svg que sería un Element. Algunas versiones de Chrome lo implementan pero eso no es parte del estandard. Está disponible en firefox a partir de la version 51
    – devconcept
    Commented el 23 ago. 2016 a las 12:36

1 respuesta 1

2

Tienes razón, solo me funcionaba en (Mac) Safari Release 11 (Safari 9.1.2, WebKit 11603.1.2) pero en Chrome Versión 52.0.2743.116 (64-bit) no.

Creo que la solución es utilizar getAttributeNS, no lo he utilizado nunca pero seguro que la docu te aclara bastante las cosas.

document.querySelector(".button").addEventListener("click", function(event) {
    console.log(event.currentTarget.getAttributeNS(null, 'data-action', null));
})

He editado el ejemplo para que compruebes que funciona.

6
  • Genial. Esto es lo que buscaba y funciona perfecto.
    – Alvaro Montoro
    Commented el 23 ago. 2016 a las 12:30
  • Me alegra poder ayudarte 😉
    – eledgaar
    Commented el 23 ago. 2016 a las 12:31
  • Parece que no funciona en Firefox (aunque no importa en este caso), pero sí en IE, Edge y Chrome
    – Alvaro Montoro
    Commented el 23 ago. 2016 a las 12:32
  • En Firefox 46.0.1 me está funcionando. Asegurase de pasar el event a la función callback.
    – eledgaar
    Commented el 23 ago. 2016 a las 12:40
  • Estoy en Firefox 47.0.1 en el CodePen que compartiste y no me escribe anda en la consola. En los demás navegadores funciona sin problemas.
    – Alvaro Montoro
    Commented el 23 ago. 2016 a las 12:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.