使用SVG.js克隆SVG矩形失败，如何让克隆图形正常显示？

嘿，我来帮你搞定这个克隆矩形的问题～你的代码里有两个小细节没处理对，导致克隆的矩形没显示出来，我给你拆解一下：

问题根源 #

1. clone()方法的参数用错了：svg.js里的clone()不需要把原元素（也就是你的rect）传进去，它本身就是基于调用它的元素来创建副本的；
2. 克隆的元素没挂载到画布：默认情况下，克隆出来的元素是“游离”状态，没有被添加到你的SVG画布实例（也就是draw）里，所以自然看不到。

修正后的代码 #

这里给你两种可行的写法：

写法1：克隆后手动添加到画布 #

// 原矩形代码保持不变
var rect = draw.rect(1650, 850).move(100, 20).attr({ 
  fill: 'white', 
  stroke: '#000', 
  'stroke-width': 5 
});

// 克隆后用.addTo(draw)挂载到画布，再调整位置避免重叠
var clone = rect.clone().addTo(draw).move(300, 20);

写法2：克隆时直接指定父容器 #

svg.js的clone()方法可以接受一个父元素作为参数，这样克隆出来的元素会直接被添加到这个容器里：

var rect = draw.rect(1650, 850).move(100, 20).attr({ 
  fill: 'white', 
  stroke: '#000', 
  'stroke-width': 5 
});

// 把draw作为参数传给clone，直接将克隆元素添加到画布
var clone = rect.clone(draw).move(300, 20);

额外提示 #

我在代码里加了.move(300, 20)是为了让克隆的矩形和原矩形错开位置，不然两个完全重叠的话，你可能会误以为克隆没成功～

内容的提问来源于stack exchange，提问作者NoobOnStack