克隆 svg 组

发布于 2024-12-08 09:40:34 字数 667 浏览 1 评论 0原文

我有一个 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>

矩形就像一个容器，发生的事情是该函数克隆矩形并保留其他元素。那么有什么问题吗？

原文

I have an svg group which contains some elements, I want to clone the group, problem is the function clones only one element of the group.
Here is the function

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

The svg looks something like

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

The rectangle is like a container and what happens is that the function clones the rectangle and leaves the other elements.
So what is wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

音栖息无 2024-12-15 09:40:34

两件事：

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