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

2023年3月13日 226次阅读

碰到我没想到的东西.在IE Edge中测试网站,我在控制台中收到错误：

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

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

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

Codepen上有一个SVG,然后我尝试使用数据集向它添加一些数据属性.当我在Microsoft Edge中查看codepen时,我收到控制台错误.

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重写我的所有数据集代码.

有没有人经历过这个或知道如何解决它？

最佳答案 这里有一个问题,状态为“固定,尚未转移”：

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8489259/

与此同时,为了向后兼容,使用getAttribute和setAttribute代替数据集似乎是要走的路.

点赞