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

Question

只是运行变成了我没想到的东西。在 IE Edge 中测试站点，我在控制台中收到错误消息：

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

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

那个 Codepen 上有一个 SVG，然后我尝试使用数据集向它添加一些数据属性。当我在 Microsoft Edge 中查看该代码笔时，出现控制台错误。

Codepen 片段

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();

阅读 SVGElement.dataset 我不确定现在该怎么做才能解决这个问题。如果可能，我想避免使用 setAttribute 重写所有数据集代码。

有人遇到过这个问题或知道如何解决吗？

Answer 1

我已经为那些将来运行跨越这个问题的人准备了一个基本的功能测试。

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

基本上，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');
}

我不够聪明，无法做适当的 polyfill，但这需要一个在 Microsoft Edge 中失败的网站才能完全正常工作。

Answer 2

此处的 'Fixed, Not yet flighted' 状态存在问题： https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8489259/

同时，为了向后兼容，使用 getAttribute 和 setAttribute 而不是 dataset 似乎是可行的方法。

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

Microsoft Edge can not set data attribute on SVG

html

javascript

svg

internet-explorer-11

microsoft-edge