Question

我需要将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：

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

Answer 1

您的代码不起作用，因为当您将SVG附加到第二个div时，您必须对其进行命名空间。

由于您使用的是jQuery，clone()是一种更简单的方法：

$('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>

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

1 个答案: