我通常使用javascript以编程方式创建SVG,并且它们对于特定元素的给定属性非常简单.

然而,我已经创建了大约svg个元素,并且希望有 Select 地将已经创建的元素分配给一个全新的元素.我该怎么做?

要详细说明,

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>

With the above, I am ending up with this enter image description here

But I want to end up with this instead, end result

推荐答案

您很接近,但需要使用outerHTML个对象(数据[1]),否则您将得到您所拥有的.

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相关问答推荐

Toast函数找不到其dis

如何在react + react路由域名中使用DeliverBrowserRouter?

如何expose 像React在onChange、onClick等中所做的那样的参数?

如何使用React渲染器放置根dis?

JS、C++和C#给出不同的Base 64 Guid编码结果

如何在JavaScript中在文本内容中添加新行

是什么原因导致此Angular 16应用程序中类型错误时属性结果不存在?

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

角色 map 集/spritebook动画,用户输入不停止在键上相位器3

如何将Map字符串,布尔值转换为{key:string;value:bo布尔值;}[]?<>

如何让npx在windows中运行js脚本?

构造HTML表单以使用表单数据创建对象数组

v—自动完成不显示 Select 列表中的所有项目

无法检测卡片重叠状态的问题

查询参数未在我的Next.js应用路由接口中定义

如何在Node.js中排除导出的JS文件

如何在JAVASCRIPT中临时删除eventListener?

在不扭曲纹理的情况下在顶点着色器中旋转UV

为列表中的项目设置动画

如何组合Multer上传?