svg - 克隆 svg 组

Question

我有一个包含一些元素的 svg 组，我想克隆组，问题是函数只克隆组中的一个元素。 这是函数

 <script type="text/ecmascript"><![CDATA[
    function clone(evt) {
        var cloneElement = evt.target.cloneNode(false);
        var newx = 100;
        var newy = 500;
        cloneElement.setAttributeNS(null,"x",newx);
        cloneElement.setAttributeNS(null,"y",newy);
        document.getElementById("layer1").appendChild(cloneElement);
    }

]]></script>

svg 看起来像

<g id="layer1" onclick="clone(evt)">
<rect>
<path>
<circle>
<circle>
</g>

矩形就像一个容器，函数克隆矩形并留下其他元素。 那么有什么问题呢？

Answer 1

两件事:

• cloneNode 如果你想要一棵深度克隆的树，应该传递 true，否则它只会克隆一个元素
• evt.target 将始终是事件起源的元素，并且 g 元素永远不会被直接击中，鼠标事件只是从子元素冒泡到那里。如果您想要当前正在处理事件的元素(在您的情况下是 g 元素)，您可以使用 evt.currentTarget 代替。