D3：在 SVG 中选择 <g> 在 Safari 中不起作用答案

【问题标题】：D3: selecting a <g> in an SVG does not work in SafariD3：在 SVG 中选择 <g> 在 Safari 中不起作用
【发布时间】：2017-06-05 02:47:30
【问题描述】：

我正在尝试：

加载外部 SVG
选择该 SVG 中的组来做某事

这是一个代码sn-p：

d3.xml("/img/Cell.svg").mimeType("image/svg+xml")
  .get(function (error, documentFragment) {

    if (error) throw error;

    var svgNode = documentFragment.getElementsByTagName("svg")[0];
    document.body.appendChild(svgNode);

    d3.select("g#ID_of_G"); // returns an empty selection in Safari, works in Chrome and Firefox
   ...
});

我也尝试将选择更改为d3.select("svg").select("g#ID_of_G")，但这并没有改变任何东西。

【问题讨论】：

或许将其作为 webkit 错误报告给他们的 bugtracker
对于那些希望重现该问题的人，这里是 Plunker，不幸的是我没有 Mac，所以我无法提供进一步的帮助...
该代码在 safari v10.0.2 中适用于我。你用的是什么版本？
大家好。非常感谢您的回复。我正在使用 Safari v9.0.2 但这不应该是问题。我在这里创建了一个简单的示例来向您展示我的错误：152.83.245.51:8060 Safari 返回一个空选择。也许这是我嵌入 SVG 的方式的问题？还是我的 SVG 有问题？谢谢大家的帮助。

标签： javascript d3.js svg safari selection

【解决方案1】：

哇，好的，我找到了问题：

如果 g 元素的 ID 中包含 大写字母，则 Safari 会出现问题。所以我不得不将 g 元素的 ID 从 ID_of_G 更改为 id_of_g 并使用：

d3.select("g#id_of_g");

这个错误报告帮助我找到了解决方案：https://bugs.webkit.org/show_bug.cgi?id=83438

【讨论】：