Microsoft Edge ne peut pas définir l'attribut de données sur SVG

Question

Je me suis heurté à quelque chose auquel je ne m'attendais pas. Test d'un site dans IE Edge, je reçois une erreur dans la console:

Impossible de définir la propriété « forme » de référence non définie ou null

Après le débogage pendant un certain temps, il semble que Microsoft Edge ne peut pas définir un attribut de données sur un élément SVG utilisant un ensemble de données. J'ai fait un test réduit:

https://codepen.io/freemagee/pen/YQRowd

Il y a un SVG unique sur ce Codepen, que je puis essayer d'ajouter quelques attributs de données à l'aide de données. Lorsque je vois ce codepen dans Microsoft Edge, je reçois l'erreur de la console.

Codepen snippets

HTML

<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="50px" height="50px" viewBox="0 0 50 50"> 
    <rect id="square" width="50" height="50" stroke="red" stroke-width="2px" fill="transparent" /> 
</svg> 

JS

function setSvgData() { 
    var svg = document.getElementById('svg'); 

    svg.dataset.shape = 'square'; 
    svg.dataset.emotion = 'gloomy'; 
} 

setSvgData(); 

Après avoir lu sur SVGElement.dataset Je ne suis pas sûr ce qu'il faut faire maintenant pour résoudre ce problème. Je voudrais éviter d'avoir à réécrire tout mon code de dataset avec setAttribute si possible.

Quelqu'un l'a-t-il ressenti ou sait comment le résoudre?

Answer 1

J'ai mis en place un test de fonctionnalité de base pour ceux qui se dérouleront dans le futur.

https://codepen.io/freemagee/pen/QgoNJz

Fondamentalement, un SVG est créé dynamiquement et l'ensemble de données est manipulé dans un try/catch.

var hasSvgDatasetSupport = supportSvgDataset(); 

function supportSvgDataset() { 
    var doesSupport = true; 
    var testSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 

    try { 
    testSvg.dataset.shape = 'vector'; 
    } catch (error) { 
    doesSupport = false; 
    } 

    return doesSupport; 
} 

// Example usage 

var el = document.getElementById('shape'); 

if (hasSvgDatasetSupport) { 
    el.dataset.mood = 'happy'; 
} else { 
    el.setAttribute('data-mood', 'unhappy'); 
} 

Je ne suis pas assez intelligent pour faire un bon polyfill, mais cela a pris un site qui a échoué dans Microsoft Edge pour travailler pleinement.

Answer 2

Il y a un problème pour elle avec le statut de « Fixe, Pas encore flighted » ici: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8489259/

En attendant, et pour la compatibilité ascendante, en utilisant getAttribute et setAttribute au lieu de dataset semble être le chemin à parcourir.