[英]Javascript to assign INNER HTML and parse to SVG element
I usually create SVG programmatically with javascript and they are pretty straightforward to do with given attributes for a particular element.我通常使用 javascript 以编程方式创建 SVG,并且它们对于特定元素的给定属性非常简单。
However, I have already created some svg
element and want to assign elements selectively from already created elements to a completely new element.但是,我已经创建了一些
svg
元素,并希望有选择地将元素从已创建的元素分配给一个全新的元素。 How can I do that?我怎样才能做到这一点?
To elaborate,详细说明,
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>
You were close, but you need to use outerHTML
of the object (data[1]) otherwise you'll get what you had.你很接近,但你需要使用对象的
outerHTML
(data[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>
Using .innerHtml
or .outerHtml
implicitely serializes and de-serializes the element to be copied.使用
.innerHtml
或.outerHtml
隐式序列化和反序列化要复制的元素。 If you want to stay with DOM objects (which for very large subtrees may be actually slower ), useNode.cloneNode(deep)
.如果您想保留 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>
它正在打印 Element 对象,因此您可能需要从该元素中引用所需的属性...
g.innerHTML=data[1].innerHTML
you're not far of, the namespaced createElementNS
can be used to create the svg element.您不远,命名空间的
createElementNS
可用于创建 svg 元素。 but to create another one like g
just use createElement
the rest is bsically like html但是要创建另一个像
g
一样的,只需使用createElement
其余的基本上就像 html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.