Javascript 如何从模板中添加SVG g元素？
我试图使用JavaScript将SVG g元素添加到SVG标记中。g元素在模板标记中定义。它位于模板标记中，因为我想多次重用它Javascript 如何从模板中添加SVG g元素？,javascript,html,templates,svg,Javascript,Html,Templates,Svg,我试图使用JavaScript将SVG g元素添加到SVG标记中。g元素在模板标记中定义。它位于模板标记中，因为我想多次重用它 <!DOCTYPE html> <html> <head> <title>Template Example</title> <style media="screen"> svg { margin: aut
<!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>
任何指点都将不胜感激- 如果您将元素放在SVG本身中，并用标记而不是标记嵌入它们，那么它们都将在正确的名称空间中创建，并且是不可见的 模板示例 svg{ 保证金：自动； } g{ 笔画：黑色； 笔画宽度：2px； 填充：无； } var temp=document.getElementsByTagname[0]； var clon=温度cloneNodetrue； var svg=document.getElementsByTagNamesvg[0]； svg.appendChildclon； var clon2=温度cloneNodetrue； clon2.setAttributetransform，translate50,0； svg.clon2；
如果您将元素放在SVG本身中，并用标记而不是标记嵌入它们，那么它们都将在正确的名称空间中创建，并且是不可见的 模板示例 svg{ 保证金：自动； } g{ 笔画：黑色； 笔画宽度：2px； 填充：无； } var temp=document.getElementsByTagname[0]； var clon=温度cloneNodetrue； var svg=document.getElementsByTagNamesvg[0]； svg.appendChildclon； var clon2=温度cloneNodetrue； clon2.setAttributetransform，translate50,0； svg.clon2；
我认为这对他没有帮助，你不再有一个模板可以重复使用，正如他在问题中所说的“它在模板标签中，因为我想多次重复使用它”。我使用了您的代码并添加了一些svg元素来尝试重用您的代码，您可以看到它失败了：。如果我是对的，他希望得到与我之前给出的答案类似的东西：。正如你所看到的，他可以随心所欲地重复使用。另外，我没有听到你的第一句话“用标记而不是aTAG嵌入它们”。@Deadsven先生当然知道，我所做的就是用这个词而不是这个词。您的示例中有一个不同的bug。如果你问我一个问题，我可以纠正你对这个孩子如何工作的误解。我已经修复了缺少单词的句子格式。我没有关于appendChild的问题，别担心。但也许您可以调整您的答案，使其具有多个svg元素（如我的代码段中所示），然后在新的svg上使用变量clon，以便您的代码段显示它是可重用的（如问题中所述）。如果你这样做，我将投票支持你的答案。作为我的答案，OP是正确的，因为他不需要任何额外的库。@Deadsven先生，如果你想的话，当然可以，也许如果你看一下它，你会意识到你做错了什么。你真的试过了吗？如果您将代码更新为克隆到其他SVG，则Robert的方法非常有效。您可以从任何SVG克隆，并将其附加到任何其他SVG。无论它是否在一个特定的环境中。它仅位于此处，以便在克隆之前不会进行渲染。我认为这对他没有帮助，你不再有一个模板可以重复使用，正如他在问题中所说的“它在模板标签中，因为我想多次重复使用它”。我使用了您的代码并添加了一些svg元素来尝试重用您的代码，您可以看到它失败了：。如果我是对的，他希望得到与我之前给出的答案类似的东西：。正如你所看到的，他可以随心所欲地重复使用。另外，我没有听到你的第一句话“用标记而不是aTAG嵌入它们”。@Deadsven先生当然知道，我所做的就是用这个词而不是这个词。您的示例中有一个不同的bug。如果你问我一个问题，我可以纠正你对这个孩子如何工作的误解。我已经修复了缺少单词的句子格式。我没有关于appendChild的问题，别担心。但也许您可以调整您的答案，使其具有多个svg元素，如我的代码片段中所示，然后使用您的变量
在新的svg上使用ble clon，因此您的代码片段表明它是可重用的，如问题中所述。如果你这样做，我将投票支持你的答案。作为我的答案，OP是正确的，因为他不需要任何额外的库。@Deadsven先生，如果你想的话，当然可以，也许如果你看一下它，你会意识到你做错了什么。你真的试过了吗？如果您将代码更新为克隆到其他SVG，则Robert的方法非常有效。您可以从任何SVG克隆，并将其附加到任何其他SVG。无论它是否在一个特定的环境中。它仅位于此处，以便在克隆之前不会进行渲染。