使用JavaScript/D3.js修改SVG后部分元素不渲染问题【已解决】

问题 #

给SVG中带group类的椭圆添加<g>父容器后，DOM结构显示正确，但被包裹的椭圆完全不渲染，只有未修改的两个椭圆正常显示。

原始SVG代码 #

<svg width="500" height="500">
   <ellipse class="blueDot" cx="140" cy="35" rx="30" ry="30" id="dot1"/>
   <ellipse class="blueDot" cx="80" cy="60" rx="30" ry="30" id="dot2"/>
   <ellipse class="blueDot group" cx="180" cy="120" rx="30" ry="30" id="dot3" />
   <ellipse class="blueDot group" cx="40" cy="180" rx="30" ry="30" id="dot4" />
   <ellipse class="blueDot group" cx="220" cy="220" rx="30" ry="30" id="dot5" />
</svg>

出错的JS代码 #

var svg = d3.select("svg");

svg.selectAll("ellipse.group").each(function(){
      console.log("Grouping: " + this.id);
    
    var oldParent = this.parentNode;
    var newParent = document.createElement('g');
    oldParent.replaceChild(newParent, this);
    newParent.appendChild(this);
});

问题根因 #

SVG是基于命名空间的XML规范，所有SVG元素必须属于http://www.w3.org/2000/svg命名空间。用普通的document.createElement()创建的<g>是HTML命名空间的元素，浏览器不把它当成SVG的组容器，自然不会渲染里面的椭圆。

修复后的代码 #

var svg = d3.select("svg");

svg.selectAll("ellipse.group").each(function(){
      console.log("Grouping: " + this.id);
    
    var oldParent = this.parentNode;
    var newParent = document.createElementNS("http://www.w3.org/2000/svg", "g"); // 核心修改
    oldParent.replaceChild(newParent, this);
    newParent.appendChild(this);
});

关键说明 #

创建SVG元素时，必须使用document.createElementNS()，第一个参数传入SVG的命名空间URL，第二个参数是元素标签名。这样生成的<g>才是SVG规范认可的组容器，浏览器才能正确解析并渲染其内部的图形元素。

内容的提问来源于stack exchange，提问作者NickG