Question

156

How do I use javascript to clone an SVG element?

rated 0 times [ 163] [ 7] / answers: 1 / hits: 22274 / 10 Years ago, tue, april 15, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kenyonmasonc

Add To Favorites

Follow

Total Points: 44

Total Questions: 117

Total Answers: 116

Location: Morocco

Member since Fri, May 22, 2020

4 Years ago

kenyonmasonc questions

1 Toggle Angular checkbox with string values instead of boolean true/false

Wed, Feb 16, 22, 00:00, 2 Years ago

1 React/node build error. Could not find a declaration file for module 'history'. 'node_modules/history/index.js' implicitly has an 'any' type

Thu, Feb 10, 22, 00:00, 2 Years ago

1 React js change meta tags dynamically

Mon, Dec 20, 21, 00:00, 3 Years ago

1 circle outline for fontAwesome icons in react native

Thu, Oct 8, 20, 00:00, 4 Years ago

1 NestJS Middleware Not Executed

Sun, Sep 20, 20, 00:00, 4 Years ago

View All

answered 10 Years ago natalyah · Accepted Answer

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>