Navegadores modernos aceitam HTML e SVG DOMnode.dataset
Usando a propriedade do conjunto de dados do nó DOM do Javascript puro .
É um antigo padrão Javascript para elementos HTML (desde Chorme 8 e Firefox 6), mas novo para SVG (desde o ano de 2017 com Chorme 55.xe Firefox 51) ... Não é um problema para SVG, porque atualmente (2019) o compartilhamento de uso da versão é dominado por navegadores modernos.
Os valores dos valores-chave do conjunto de dados são cadeias de caracteres puras, mas uma boa prática é adotar o formato de cadeia JSON para tipos de dados que não são de cadeia, para analisá-lo JSON.parse()
.
Usando a propriedade do conjunto de dados em qualquer contexto
Snippet de código para obter e definir conjuntos de dados de valores-chave nos contextos HTML e SVG.
console.log("-- GET values --")
var x = document.getElementById('html_example').dataset;
console.log("s:", x.s );
for (var i of JSON.parse(x.list)) console.log("list_i:",i)
var y = document.getElementById('g1').dataset;
console.log("s:", y.s );
for (var i of JSON.parse(y.list)) console.log("list_i:",i)
console.log("-- SET values --");
y.s="BYE!"; y.list="null";
console.log( document.getElementById('svg_example').innerHTML )
<p id="html_example" data-list="[1,2,3]" data-s="Hello123">Hello!</p>
<svg id="svg_example">
<g id="g1" data-list="[4,5,6]" data-s="Hello456 SVG"></g>
</svg>