CODEWITHSUNDEEP
jquerysvgsettingsclonejquery-svg
Jayy
Jayy

Reputation: 14798

Keith Wood JQuery SVG: clone() followed by change() not working

In this JSFiddle, (code below), I'm simply trying to clone a path and change its settings. However when I run the code, it gives the error that rect2 does not have the method setAttribute() defined.

However, instead, when I run the change() method on rect1, it does not produce an error, as in this JSFiddle. So I suspect it's a problem with the clone method, in that it doesn't produce a complete clone.

What am I doing wrong? If it's a problem with the extension, what's a neat workaround? Thanks

$('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
    });
}});

My efforts so far:

Upvotes: 2

Views: 829

Answers (2)

greg
greg

Reputation: 11

I'm not sure of exactly what you're trying to do but I suffered a similar problem wherein I was unable to manipulate attributes of a cloned SVG object.

My solution was to use my initial object as my workspace and make amends to it. I'd then clone the initial object (and position/move the clone as required) before returning to my initial object and tweaking it again before cloning again... Rinse and repeat...

It's awkward and hacky, and may not even fit your requirements, but it was the only way I could get round the cloning issues.

Upvotes: 1

Jayy
Jayy

Reputation: 14798

The clone function returns an array of cloned nodes. So I changed

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

to 

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

What I don't get is why the returned array appears to be of type SVGPathElement!! I can't see any kind of casting in the jquery.svg.js source.

Upvotes: 0

Related Questions