stackoom
  简体   繁体   中英

How do I use javascript to clone an SVG element?

 原文  2014-04-15 18:25:49  0   3    javascript/ svg

Question

I am trying to follow the example here under the cloneNode section (fourth occurrence of 'cloneNode' in the document). The document says it's a DRAFT so i'm wondering if these features don't exist with SVG yet??

Here is my 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>

As you can see, the alert 'bye' doesn't work. Thanks in advance for the help.

3 answers

solution1
 6  2014-04-15 18:28:15

When you call getElementById , the element doesn't yet exist. Put the script at the end of the body : 

<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>

solution2
 2 ACCPTED  2014-04-15 20:21:38

This seems to be more complicated than need be. Start with just your pawn path in your root svg. Then clone, and append to root. One of the important things to address that once you clone, you should change the id of the cloned element. Otherwise you will get a conflict when addressing the original cloned element.

Try This: 

<!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>

solution3
 2  2014-04-16 00:46:29

To make it clear what was causing errors:

  1. var Root=document.documentElement was wrong because we need to make sure the new clone gets added to its parent SVG, not at the end of the page. Instead we must add an id="mySVG" to the parent and then use var Root=mySVG .

  2. var G=document.getElementById("groupid") didn't grab the 'groupid' element because the code ran before the element existed. The solution is to trigger the code to run AFTER the page loads (use onload event, or move the script to the bottom of the body ).

  3. var move="translate("+0+","+30+")" was replacing the transform property in the SVG group, overwriting the old translate AND the scale(0.022) . Therefore, while the clone existed after fixing the above two errors, it was so far down that it was out of the viewBox. Instead I should use var move="translate(0,1) scale(0.022)"

暂无
暂无

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.

Related Question How do I use javascript to insert an svg use element into an svg group? How do I use javascript to set the glyph-orientation-horizontal property on an svg text element? How can I use a Javascript variable to define the width of an SVG element? How do I dynamically centre one svg element on another with javascript How do I get the width of a scaled SVG element with JavaScript? How do I set the size of an SVG element using JavaScript? How to clone element when i use $.append How do I clone an element or chunk of dom? How do I use javascript onmouseover function with svg to get classname? How do I use one element of an SVG to change the opacity of another, in the same SVG?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM