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

标签 javascript svg

我通常使用 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>

有了上面的内容,我就得到了这个 enter image description here

但我想以这个结束, end result

最佳答案

您已经很接近了,但您需要使用对象 (data[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>

关于Javascript 分配 INNER HTML 并解析为 SVG 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72478597/

相关文章:

javascript - 线的第一个坐标 (x0,y0) 不影响 SVG 中的起始位置

css - 带有渐变边框的透明圆形按钮

javascript - 在 d3 树布局中查找链接终点的坐标

javascript - 从 HTML 文件输出两个特定字段的值的最简单方法是什么?

css - 为什么 Edge 浏览器会裁剪图片?

javascript - dc.js - 在一组中一起渲染两个对象(一个图表 - 渲染,一个形状 - 不渲染)?

javascript - 如何在 AngularJS 中设置输入的值,而不影响其 ngModel

css - 从背景中剪下的透明文本

javascript - 替代 Facebook 评论框插件?

javascript - MUI 自动完成 onchange 不会在芯片删除时触发