How do I add an SVG g element from a template?
Question
I am trying to add an SVG g element to an SVG tag using JavaScript. The g element is defined in a template tag. It is in a template tag as I want to reuse it many times.
<!DOCTYPE html>
<html>
<head>
<title>Template Example</title>
<style media="screen">
svg {
margin: auto;
}
g {
stroke:black;
stroke-width:2px;
fill:none;
}
</style>
</head>
<body>
<template>
<g>
<line x1=" 2" y1="2" x2=" 7" y2="7" ></line>
<line x1="25" y1="2" x2="20" y2="7" ></line>
<path class="botLeft" d="m 1,26 6,-6" ></path>
<path class="botRite" d="m 26,26 -6,-6" ></path>
<rect x="1" y="1" rx="3" ry="3" width="25" height="25" ></rect>
<path class="rectIn" d="m 7,7 0,13 13,0 0,-13 z" style="fill:gray;" ></path>
</g>
</template>
<svg width="80%" height="80%" ></svg>
<script type="text/javascript">
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
var svg = document.getElementsByTagName("svg")[0];
svg.appendChild(clon);
</script>
</body>
</html>
This code adds the g element to the DOM in the correct place, but the element is not rendered.
After reading other posts regarding SVG, I think this is because this is not a normal HTML element, but an SVG Element.
How do I advise the browser to treat this as an SVG element?
I have seen some remarks hinting at namespaces but can not understand what is needed.
Any pointers will be appreciated ;-)
2 answers
solution1
3 2018-06-11 08:43:43
If you put the elements in the SVG itself and embed them with a <defs> tag instead of a <template> tag they will all get created in the right namespace and also be invisible.
<!DOCTYPE html> <html> <head> <title>Template Example</title> <style media="screen"> svg { margin: auto; } g { stroke:black; stroke-width:2px; fill:none; } </style> </head> <body> <svg width="80%" height="80%" > <defs> <g> <line x1=" 2" y1="2" x2=" 7" y2="7" ></line> <line x1="25" y1="2" x2="20" y2="7" ></line> <path class="botLeft" d="m 1,26 6,-6" ></path> <path class="botRite" d="m 26,26 -6,-6" ></path> <rect x="1" y="1" rx="3" ry="3" width="25" height="25" ></rect> <path class="rectIn" d="m 7,7 0,13 13,0 0,-13 z" style="fill:gray;" ></path> </g> </defs> </svg> <script type="text/javascript"> var temp = document.getElementsByTagName("g")[0]; var clon = temp.cloneNode(true); var svg = document.getElementsByTagName("svg")[0]; svg.appendChild(clon); var clon2 = temp.cloneNode(true); clon2.setAttribute("transform", "translate(50,0)"); svg.appendChild(clon2); </script> </body> </html>
solution2
-1 2018-06-11 07:39:54
I always just use the HTML of the template to add to the svg. This way it can't go wrong: https://codepen.io/mrdeadsven/pen/eKvvwV?editors=1010
//This code gets the raw HTML of the template
var temp = d3.select('#d3Template').html();
//Simply adds the raw HTML to the svg element
svg.innerHTML = temp;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.