如何使用javascript克隆SVG元素？

我正在尝试使用cloneNode部分下的示例here（文档中第四次出现'cloneNode'）。该文件说这是一个草稿，所以我想知道如果这些功能不存在与SVG？如何使用javascript克隆SVG元素？

这里是我的HTML：

<html> 
<head> 
<script> 

var Root=document.documentElement 
function clone(){ 
var G=document.getElementById("groupid") 
alert('hi') 
var NewG=G.cloneNode(true) 
alert('bye') 
var move="translate("+0+","+30+")" 
NewG.setAttributeNS(null,"transform",move) 
Root.appendChild(NewG) 
} 
clone() 

</script> 
</head> 
<body> 
    <div style="" width="100px" > 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="bigsvg"><?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg width="100%" height="100%"> 
    <svg width="100%" ID="piece" y="0" x="0" class="black" height="100%"> 
     <g transform="translate(0.005) scale(0.022)" id="groupid"> 
      <path class="onepointsix" d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " /> 
     </g> 
    </svg> 
</svg> 
    </div> 
</body> 
</html>

正如你所看到，警报 '再见' 不起作用。先谢谢您的帮助。

来源

2014-04-15 mareoraft

我想补充一点，我得到“类型错误：‘空’不是一个对象（评估“G .cloneNode'）“JS失败。 – mareoraft

这是因为'getElementById'返回'null'（请参阅我的答案）。 –

对SO用户的提示：我的回答不完整，此问题仍然存在。 –

这似乎是复杂得多，需要的话。从你的根svg开始，只有你的典当路径。然后克隆，并追加到根。克隆之后要解决的重要问题之一是，您应该更改克隆元素的ID。否则在寻址原始克隆元素时会发生冲突。

试试这个：

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
     <title>Title</title> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     </head> 
     <body style='font-family:arial'> 
      <center> 

      <div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'> 
<svg id="mySVG" width="400" height="400" xmlns="http://www.w3.org/2000/svg" > 
<path id="pawn" d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " /> 
</svg> 
      </div> 
      <br />SVG Source:<br /> 
      <textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea> 
      <br />Javascript:<br /> 
      <textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea> 
      </center> 
<script id=myScript> 
var Root=mySVG 
function clone(){ 
var newPawn=pawn.cloneNode(true) 
newPawn.id="newPawn1" 
var move="translate("+0+","+30+")" 
newPawn.setAttribute("transform",move) 
Root.appendChild(newPawn) 
} 
</script> 
      <script> 
      document.addEventListener("onload",init(),false) 
      function init() 
      { 
       clone() 
       svgSourceValue.value=svgDiv.innerHTML 
       jsValue.value=myScript.text 
      } 
      </script> 
     </body> 
    </html>

来源

2014-04-15 20:21:38

当您拨打getElementById时，该元素尚不存在。把脚本在身体的末尾：

<head> 
</head> 
<body> 
    <div style="" width="100px" > 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="bigsvg"><?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg width="100%" height="100%"> 
    <svg width="100%" ID="piece" y="0" x="0" class="black" height="100%"> 
     <g transform="translate(0.005) scale(0.022)" id="groupid"> 
      <path class="onepointsix" d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " /> 
     </g> 
    </svg> 
</svg> 
    </div> 
<script> 

var Root=document.documentElement 
function clone(){ 
var G=document.getElementById("groupid") 
alert('hi') 
var NewG=G.cloneNode(true) 
alert('bye') 
var move="translate("+0+","+30+")" 
NewG.setAttributeNS(null,"transform",move) 
Root.appendChild(NewG) 
} 
clone() 

</script> 
</body> 
</html>

来源

2014-04-15 18:28:15

现在你快了，只是打字，这是一个小提琴 - > http://jsfiddle.net/J3UXK/ – adeneo

@adeneo我也测试过了（在jsbin上：http://jsbin.com/kapey/1 /） –

谢谢，这是一大步。但是，我们仍然没有克隆节点。只有一个棋子，我们想要两个！多谢你们。 – mareoraft

要清楚是什么原因导致的错误：

VAR根= document.documentElement中是错误的，因为我们需要确保新的克隆得到添加到其父SVG，而不是在页面的末尾。相反，我们必须向父级添加一个id =“mySVG”，然后使用var Root = mySVG。
var G = document.getElementById（“groupid”）没有抓住'groupid'元素，因为代码在元素存在之前运行。解决方案是触发代码在页面加载后运行（使用加载事件，或将脚本移动到本体的底部）。
VAR举动= “翻译（” + 0 + “ ”+ 30 +“）”被取代SVG组中的变换特性，并覆盖旧的平移和刻度（0.022）。因此，在修复上述两个错误之后克隆已经存在，但是它已经到了不在viewBox的范围之内了。相反，我应该使用VAR举动=“翻译（0,1）规模（0.022）”

来源

2014-04-16 00:46:29 mareoraft

如何使用javascript克隆SVG元素？

回答

相关问题