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