Question

我正在尝试按照cloneNode部分下的示例here（文档中第四次出现'cloneNode'）。该文件说这是一个草案，所以我想知道这些功能是否与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>

如您所见，警告“再见”不起作用。在此先感谢您的帮助。

Answer 1

当您致电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>

Answer 2

这似乎比需要的更复杂。从root svg中的pawn路径开始。然后克隆，并附加到root。克隆后要解决的一个重要问题是，您应该更改克隆元素的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>

Answer 3

明确导致错误的原因：

var Root = document.documentElement 错误，因为我们需要确保将新克隆添加到其父SVG，而不是页面末尾。相反，我们必须向父母添加 id =＆＃34; mySVG＆＃34; ，然后使用 var Root = mySVG 。
var G = document.getElementById（＆＃34; groupid＆＃34;）没有抓住＆＃39; groupid＆＃39;元素，因为代码在元素存在之前运行。解决方案是触发代码在页面加载后运行（使用 onload 事件，或将脚本移动到正文的底部）。
var move =＆＃34;翻译（＆＃34; +0 +＆＃34;，＆＃34; +30 +＆＃34;）＆＃34; 正在替换SVG组中的转换属性，覆盖旧的转换和比例（0.022）。因此，虽然克隆在修复上述两个错误后仍然存在，但它远远落后于viewBox。相反，我应该使用 var move =＆＃34; translate（0,1）scale（0.022）＆＃34;

如何使用javascript克隆SVG元素？

3 个答案: