JavaScript赋值innerHTML并解析为SVG元素的正确实现方法

平时用JavaScript动态创建SVG元素时，只需给元素设置对应属性即可完成创建，流程十分简洁。目前已预先创建了若干SVG子元素，需要从现有元素中选择性选取部分元素添加到新创建的SVG元素中，但运行代码后页面没有正确渲染选中的第二个class为data的path元素，仅显示[object SVGPathElement]文本，效果不符合预期，需要实现新创建的g元素中正确渲染选中的path图形，正常展示SVG线条。

问题代码 #

JS逻辑 #

const svgns = 'http://www.w3.org/2000/svg'
const data = document.querySelectorAll('.data');
const g = document.createElementNS(svgns,'g');
const svg = document.querySelector('svg')
svg.appendChild(g);
g.innerHTML=data[1]

HTML结构 #

<svg viewBox="0 0 1280 720">
<path class="data" d="M0,369.7212377116376L42.5,369.7212377116376L85,205.8361201779427L127.5,193.40571206161306M212.5,137.41217543094052L255,137.41217543094052L297.5,153.22714379227432L340,153.22714379227432L382.5,153.22714379227432L425,105.78223870826811L467.5,105.78223870826811L510,89.9672703469343L552.5,153.22714379227432L595,153.22714379227432L637.5,153.22714379227432L680,121.59720706960431L722.5,121.59720706960431L765,105.78223870826811L807.5,58.337333624261966L850,58.337333624261966L892.5,58.337333624261966L935,15.710233471524248L977.5,15.710233471524248L1020,0" fill="none" stroke="black" stroke-width="2px"></path>
<path class="data" d="M807.5,585.3328922455355L850,522.7223136889293L892.5,522.7223136889293L935,522.7223136889293L977.5,522.7223136889293L1020,522.7223136889293" fill="none" stroke="black" stroke-width="2px"></path>
<path class="data" d="M0,600L42.5,600L85,543.9346408501839L127.5,563.379274081334L170,563.379274081334L212.5,563.379274081334L255,506.9424117762887L297.5,506.9424117762887L340,506.9424117762887L382.5,506.9424117762887L425,275.5038503908931L467.5,352.6500375193584L510,236.93075682666057L552.5,236.93075682666057L595,256.2173036087768" fill="none" stroke="black" stroke-width="2px"></path>
</svg>

效果展示 #

• 错误效果
  
• 预期效果
  

innerHTML仅支持接收字符串类型的内容，data[1]是querySelectorAll返回的SVGPathElement类型DOM对象，直接赋值给innerHTML时，JS会自动将对象转为字符串，最终输出[object SVGPathElement]文本，无法生成对应的SVG图形。

两种实现方式可按需选择：

• 方案1：直接操作DOM节点
  如果不需要保留原位置的path元素，直接用appendChild插入选中节点即可；如果需要保留原位置元素，先克隆节点再插入。

  const svgns = 'http://www.w3.org/2000/svg'
  const data = document.querySelectorAll('.data');
  const g = document.createElementNS(svgns,'g');
  const svg = document.querySelector('svg')
  svg.appendChild(g);
  // 直接移动原有元素到g中，原位置元素会被移除
  // g.appendChild(data[1])
  // 保留原位置元素：传入true做深克隆，完整复制元素属性和子节点
  g.appendChild(data[1].cloneNode(true))
  

  注意：如果原path元素带有id属性，克隆后会出现id重复问题，需要手动修改克隆元素的id避免冲突。

• 方案2：使用元素字符串赋值
  如果要沿用innerHTML写法，取选中元素的outerHTML（元素本身的完整HTML字符串）赋值即可：

  const svgns = 'http://www.w3.org/2000/svg'
  const data = document.querySelectorAll('.data');
  const g = document.createElementNS(svgns,'g');
  const svg = document.querySelector('svg')
  svg.appendChild(g);
  g.innerHTML = data[1].outerHTML
  

补充：SVG属于XML命名空间下的元素，创建时必须使用createElementNS传入正确的SVG命名空间，否则元素会被识别为普通HTML元素无法正常渲染，当前代码中的g元素创建方式是正确的。

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