Javascript 分配 INNER HTML 并解析为 SVG 元素

Question

我通常使用 javascript 以编程方式创建 SVG，它们可以非常简单地处理特定元素的给定属性。

但是，我已经创建了一些 svg 元素，并希望将元素从已创建的元素中选择性地分配给一个全新的元素。我该怎么做？

详细说明，

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]

<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>

有了上面的内容，我就这样结束了

但我想以此结束，

Answer 1

它正在打印 Element 对象，因此您可能需要从该元素引用您想要的属性...

g.innerHTML=data[1].innerHTML

Answer 2

不远了，命名空间 createElementNS 可用于创建 svg 元素。但是要创建另一个像 g 只需使用 createElement 其余的基本上就像 html

Answer 3

你很接近，但你需要使用对象（数据[1]）的 outerHTML 否则你会得到你所拥有的。

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 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>

Answer 4

使用.innerHtml 或.outerHtml 隐式序列化和de-serializes 要复制的元素。如果您想保留 DOM 个对象（对于非常大的子树，实际上可能较慢），请使用 Node.cloneNode(deep).

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.appendChild(data[1].cloneNode(true))

<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>

Javascript 分配 INNER HTML 并解析为 SVG 元素

Javascript to assign INNER HTML and parse to SVG element

javascript

svg