为何appendChild可作用于g元素却无法作用于rect元素？

核心原因 #

SVG元素有明确的类型划分：<rect>属于图形元素，SVG规范明确规定这类元素不能包含任何子元素；而<g>是容器元素，设计初衷就是用来分组、嵌套其他SVG元素（包括图形元素、其他容器元素等）。所以你能成功将r2追加到g里，但r1追加到rect里的操作会被浏览器直接忽略，自然看不到蓝色矩形。

验证与修正 #

你的代码里r.appendChild(r1)这行不符合SVG规范，要让r1正常显示，只需把它追加到容器元素中，比如和r、r2一样放到<g>里：

// 替换原代码中的 r.appendChild(r1);
g.appendChild(r1);

修改后的完整代码示例：

<html>
<body>
  <div>
    <svg height=100vh width=100%>
    <g id='g'>
      <rect id='r' width=100 height=100 fill='green'/></g>
      </svg>
  </div>
  <script>
    function setAttribs(elem, attrs) {
      Object.entries(attrs).forEach(([key, value]) => {
        elem.setAttribute(key, value);
      });
      return elem;
    };

    const g = document.getElementById('g');
    const r = document.getElementById('r');

    const r1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    const r2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

    setAttribs(r1, {
      x: 0,
      y: 100,
      height: 50,
      width: 40,
      fill: 'blue'
    });
    setAttribs(r2, {
      x: 0,
      y: 150,
      height: 50,
      width: 40,
      fill: 'red'
    });

    g.appendChild(r1);
    g.appendChild(r2);
  </script>
</body>
</html>

补充说明 #

SVG中常见的容器元素有<g>、<svg>、<defs>、<symbol>等，这些元素支持嵌套其他SVG元素；而<rect>、<circle>、<path>这类图形元素，以及<text>这类文本元素，都只能作为叶子节点存在，不能包含子元素。

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