Copy and paste the svg element from one div to another div

Question

I need to copy and paste the svg element from one div to another. Is there any possibilities where we can easily achieve this. I tired using the below method.

Circle = document.createElementNS("http://www.w3.org/2000/svg", tagName);
            Circle.setAttribute("cx", x);
            Circle.setAttribute("cy", y);
            Circle.setAttribute("r", r);
            Circle.setAttribute("stroke", s);
            Circle.setAttribute("stroke-width", sw);
            Circle.setAttribute("fill", fc);

But i feel it is more complex to create for all the element. Below i have added the sample code for reference.

HTML:

<div class="div1">
    <svg width="1000" height="1000">
        <g>
            <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
            <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
            <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
            <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
            <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
            <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
            <path stroke="red" d="M5 20 l215 0" />
            <path stroke="black" d="M5 40 l215 0" />
            <path stroke="blue" d="M5 60 l215 0" />
        </g>
    </svg>
</div>
<div class="div2">
    <svg width="1000" height="1000">
    </svg>
</div>
<a href="#">Click</a>

Javascript:

$('a').click(function(){
    $('.div2 svg').append($('.div1 svg').html();
)});

score 3 · Answer 1 · answered Sep 13 '16 at 15:42

Your code doesn't work because you'll have to namespace the SVG when you append it to the second div.

Since you're using jQuery, clone() is a easier method:

$('a').click(function(){
    $('.div1 svg').clone().appendTo($('.div2'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
    <svg width="400" height="200">
        <g>
            <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
            <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
            <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
            <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
            <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
            <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
            <path stroke="red" d="M5 20 l215 0" />
            <path stroke="black" d="M5 40 l215 0" />
            <path stroke="blue" d="M5 60 l215 0" />
        </g>
    </svg>
</div>
<div class="div2">
</div>
<a href="#">Click</a>

score 0 · Answer 2 · answered Aug 21 '23 at 22:15

For me, .clone() in jQuery was still creating tags in the wrong namespace, so I had to create my own cloneSvg method:

  const createSvg = tagName => {
    const dom = document.createElementNS('http://www.w3.org/2000/svg', tagName);
    return $(dom);
  }

  const cloneSvg = tag => {
    const clone = createSvg(tag[0].tagName);
    Array.from(tag[0].attributes).forEach(attr => {
      clone.attr(attr.name, attr.value);
    });

    // Clone children
    tag.children().each((i, child) => {
      const childClone = cloneSvg($(child));
      clone.append(childClone);
    });

    return clone;
  }

That allowed me to do things like compose the parts of 2 svgs, like so:

const composition = cloneSvg($('svg.one'));
const translateG = createSvg('g');
translateG.attr('transform', 'translate(5, 5)');
translateG.append(cloneSvg($('svg.two').find('path.shape')));
composition.append(translateG);
$('#svgDiv').append(composition);

This allowed me to grab svg.one in full, clone it, grab the only path in svg.two, clone it, and insert it into a new, composed svg, that shifted the imported shape a bit so that its center matched up with the existing shape.

Copy and paste the svg element from one div to another div

2 Answers2