0
281
VisualizaçõesJavascript 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.
However, I have already created some svg element and want to assign elements selectively from already created elements to a completely new element. 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>With the above, I am ending up with this
But I want to end up with this instead,
·
Juan Pablo Isaza
3 Respostas
Responde à pergunta0
You were close, but you need to use outerHTML of the object (data[1]) otherwise you'll get what you had.
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>
·
Juan Pablo Isaza
Relatório
0
Using .innerHtml or .outerHtml implicitely serializes and de-serializes the element to be copied. If you want to stay with DOM objects (which for very large subtrees may be actually slower), use 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>
·
Juan Pablo Isaza
Relatório
0
It's printing the Element object, so you probably need to reference the attribute you want from that element...
g.innerHTML=data[1].innerHTML
·
Juan Pablo Isaza
Relatório
Responde à pergunta