Jquery 将svg元素从一个div复制并粘贴到另一个div

我需要将svg元素从一个div复制并粘贴到另一个div。我们是否有可能轻松实现这一目标。我厌倦了使用下面的方法

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

但我觉得为所有元素创建更复杂。下面我添加了示例代码以供参考

HTML:

---

您的代码不起作用，因为在将SVG附加到第二个div时，必须对其命名

因为您使用的是jQuery，所以使用jQuery是一种更简单的方法：

$（'a'）。单击（函数（）{
$（'.div1 svg'）.clone（）.appendTo（$（'.div2'））；
});


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

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