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

Question

这个问题已经有答案了:

jquery's append not working with svg element? (17 个回答)

已关闭 11 天前。

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