Question

在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
    });
}});

到目前为止我的努力：

如果我在克隆之前发出警报（rect1），则说“[object SVGPathElement]”。
如果我在克隆后发出警报（rect2），它也会说“[object SVGPathElement]。
如果我发出警报（rect1.setAttribute），则说“function setAttribute（）{[native code]}”
如果我发出警报（rect2.setAttribute），则表示“未定义”。

Answer 1

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

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

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

Answer 2

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

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

到

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

我没有得到的是为什么返回的数组看起来是SVGPathElement类型！我在jquery.svg.js源代码中看不到任何类型的转换。

Keith Wood JQuery SVG：clone（）后跟change（）不起作用

2 个答案: