Javascript Microsoft Edge无法在SVG上设置数据属性

只是遇到了我没想到的事情。在IE Edge中测试站点时，控制台中出现错误：

无法设置未定义或空引用的属性“shape”

调试一段时间后，Microsoft Edge似乎无法使用dataset在SVG元素上设置数据属性。我制作了一个简化的测试用例：

代码笔上只有一个SVG，然后我尝试使用dataset向它添加一些数据属性。当我在MicrosoftEdge中查看代码笔时，我得到了控制台错误

代码笔片段

HTML

读过之后，我不确定现在该怎么解决这个问题。如果可能的话，我想避免用setAttribute重写所有数据集代码

---

有人经历过这种情况或者知道如何解决它吗？

我为将来遇到这种情况的人准备了一个基本的功能测试

基本上，SVG是动态创建的，数据集是在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');
}

---

我不够聪明，无法进行正确的多边形填充，但这使一个在Microsoft Edge中失败的站点完全工作。

此处有一个状态为“已修复，尚未修复”的问题：

---

同时，为了向后兼容，使用

getAttribute

和

setAttribute

而不是

dataset

似乎是一种方法。

谢谢Robert。遗憾的是，这似乎有点死路一条。我在atm上尝试了其中一种polyfills，但没有效果。您的解决方案是可行的，但为什么不总是使用setAttribute呢？它适用于所有浏览器？使用dataset除了语法之外没有什么直接的好处。@Ferdy，你说得对。使用setAttribute可以缓解整个情况。但这个场景是在测试中出现的，数据集主要用于该项目。

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

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

setSvgData();

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');
}