Keith Wood JQuery SVG：clone() 后跟 change() 不起作用答案

【问题标题】：Keith Wood JQuery SVG: clone() followed by change() not workingKeith Wood JQuery SVG：clone() 后跟 change() 不起作用
【发布时间】：2013-03-04 18:45:51
【问题描述】：

在this JSFiddle（下面的代码）中，我只是尝试克隆路径并更改其设置。但是，当我运行代码时，它给出了 rect2 没有定义方法 setAttribute() 的错误。

但是，相反，当我在 rect1 上运行 change() 方法时，它不会产生错误，就像在 this JSFiddle 中一样。所以我怀疑这是克隆方法的问题，因为它不会产生完整的克隆。

我做错了什么？如果扩展有问题，有什么好的解决方法？谢谢

$('body').svg({onLoad: function(svg){
    var path = svg.createPath();
    var rect1 = svg.path(
        path.move( 50, 50 )
        .line( 200, 0, true )
        .line( 0, 200, true )
        .line( -200, 0, true )
        .close(),
        {
            fill: 'none', 
            stroke: '#00f', 
            strokeWidth: 30
        }
    );
    var rect2 = svg.clone(null, rect1);
    svg.change(rect2, {
            fill: 'none', 
            stroke: '#f00', 
            strokeWidth: 10
    });
}});

到目前为止我的努力：

如果我在克隆之前执行 alert(rect1)，它会显示“[object SVGPathElement]”。
如果我在克隆后执行 alert(rect2)，它还会显示“[object SVGPathElement]。
如果我执行 alert(rect1.setAttribute)，它会显示“function setAttribute() {[native code]}”
如果我执行 alert(rect2.setAttribute)，它会显示“未定义”。

【问题讨论】：

你使用的是哪个 jQuery 插件？ clone 是那个 svg 插件的 API 吗？
这是基思·伍德的。是的，克隆在那个 API 和文档中，在“SVG Defs”下的参考部分keith-wood.name/svgRef.html

标签： jquery svg settings clone jquery-svg

【解决方案1】：

我不确定您到底想要做什么，但我遇到了类似的问题，我无法操作克隆的 SVG 对象的属性。

我的解决方案是使用我的初始对象作为我的工作区并对其进行修改。然后我会克隆初始对象（并根据需要定位/移动克隆），然后返回到我的初始对象并在再次克隆之前再次调整它......冲洗并重复......

这很笨拙，很笨拙，甚至可能不符合您的要求，但这是我解决克隆问题的唯一方法。

【讨论】：

【解决方案2】：

克隆函数返回一个克隆节点数组。所以我改变了

var rect2 = svg.clone(null, rect1);

到

var rect2 = svg.clone(null, rect1)[0];

我不明白为什么返回的数组似乎是 SVGPathElement 类型！我在 jquery.svg.js 源代码中看不到任何类型的转换。

【讨论】：