attrPlugin use in nested SVGs

[swampthang]

I'm trying to animate the x and y of a nested SVG and am getting the error:

 

Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present.

 

The codepen uses the min version so can't debug this. What am I missing? 

 

 

Related post:

http://greensock.com/forums/topic/14620-tweenmaxset-drawsvg0-in-nodejs-not-working/

 

regarding the above related post - I'm not going to have a lot of control over the SVGs that will be dropped in to the editor except that I should be able to strip some attributes out.

See the Pen oLZEOK by swampthang (@swampthang) on CodePen.

[OSUblake]

You're using an old version of GSAP.

See the Pen EyWLoW by osublake (@osublake) on CodePen.

[PointC]

Hi swampthang 

 

Looks like you're loading an older version of TweenMax (1.14.2). I switched your pen to 1.18.5 and it worked fine for me. You also don't need to load the AttrPlugin as it's already loaded with TweenMax. 

 

Edit: dang it Blake. Mr. Fast Typist.   

[swampthang]

Hehe, thanks you guys. My local npm build was up to date but the codepen, where I was testing had gotten stale. Wow, I'll have to make sure I make that one of the first things I check from now on. Getting fired up about the possibilities!

[swampthang]

Ok, now I'm not sure what the deal is but am unable to get a nested SVG to respond to draggable. I've looked at a few posts in the forums but not finding one where a complete SVG is nested inside another and trying to move the nested SVG itself. When I remove the outer SVG it works. I've added a stopPropagation() to the inner svg and know that it's what's being selected because there's a log for both inner and outer and it seems to be firing correctly.

 

Here's the codepen. 

See the Pen LkLrRG by swampthang (@swampthang) on CodePen.

 

Sure hope this is possible because I have to use an SVG as the wrapper.

[Jonathan]

swampthang,

See the Pen LkLrRG by swampthang (@swampthang) on CodePen.

is working in latest Firefox but not in latest Chrome .. tested on Windows 7 (64-bit)

[GreenSock]

From what I can tell, that's actually a browser limitation. Open up Dev Tools and you'll see that transforms are being applied properly by GSAP, but have no effect visually (in Chrome at least). Draggable wasn't really designed for multiple nested <svg> roots anyway. 

 

A pretty easy solution would probably be to just wrap your inner <svg> with a <g> and make that Draggable instead. Seemed to work fine in my test. 

[swampthang]

ahhh, that explains it. Not a good thing since I'm trying to use this in Electron which uses the Chromium browser. I'll just have to dynamically wrap each inner svg in a <g/> tag. thanks so much for pointing that out.

[swampthang]

Looks like I can wrap the inner svg's in a foreignObject and get it to work. 

 

See the Pen LkLrRG by swampthang (@swampthang) on CodePen.

[Jonathan]

Nice Job

You might want to add the CSS property:

 

See the Pen GqEZyp by jonathan (@jonathan) on CodePen.

svg {
    -webkit-touch-callout: none;
}

This will prevent the context menu from popping up after you release the drag on mobile. I tested on Droid Turbo latest Android build.

[swampthang]

Ahh, thanks for the input, Jonathan.

[swampthang]

I ended up dynamically wrapping every SVG that gets dropped onto the stage in a group element and giving them unique IDs.

 

foreignObject didn't work for my application because I needed to convert each animation frame to a master SVG to use in an image animation sequence exported to mov files (retaining transparency for use in video editors). When I tried exporting the master SVG, it didn't contain any of the foreignObject stuff which sort of defeated the purpose.

 

In Electron, (se post above re the Chromium browser's embedded SVG transform bug) I can now use x/y transforms to the group and drawSVG on the inner SVGs. Draggable is added to the groups.

All is well in Electron land.

[swampthang]

Ok, I thought I had this all worked out but now I can't get drawSVG to work. I've got the SVG wrapped in a group nested in the master SVG and am able to tween it across the screen but now drawSVG isn't working right. I don't think this is the Chrome bug because it doesn't work in FF either. I'm doing something wrong. Just scratching my head here trying to figure out what.

 

See the Pen NAakEN?editors=1010 by swampthang (@swampthang) on CodePen.

[GreenSock]

It looks like you don't have any stroke on those SVGs, thus you won't see any drawing happening. Try adding this to your CSS and you'll see what I mean: 

rect, path {
    stroke: orange;
    stroke-width: 2px;
}

Remember, the way drawSVG works is by animating the stroke's stroke-dashOffset and/or stroke-dashArray. 

 

Perhaps you intended for that SVG artwork to be built differently, so that strokes are used instead of outlined shapes with fills. For that, you'd need to alter the original artwork (it's not something GSAP can automate for you)

[swampthang]

Ahhh, I just saw your note, Jack. Thanks so much for the reply. Looks like we're gonna have to go through all these SVGs and make sure they're constructed properly. Never occurred to me that there were no strokes on those. Shoot. Spent all morning trying to figure this out. 

 

So, one question, why would this not work?

<path fill="none" stroke="#282D33" stroke-width="4" d="M87.3 89.27"/>

[swampthang]

Ok, so, yea, here's a different SVG that works. 

See the Pen XKZvZy by swampthang (@swampthang) on CodePen.

[GreenSock]

The problem with this: 

<path fill="none" stroke="#282D33" stroke-width="4" d="M87.3 89.27"/>

...is that there's literally nothing drawn. It just starts with an "M" command to move to a coordinate and then...nothing. There's no path, segment, or anything that you'd see. It's like saying "move you pen to this spot, put it down on the paper and....do nothing."

[swampthang]

Ahhhh, ok. I've got to get a little better at sifting through SVGs and recognizing this stuff. Started going through this video series on safaribooskonline and had to get back to work. Kind of ironic...

SVG Animation

By: Sarah Drasner

Publisher: Frontend Masters

[GreenSock]

That is pretty funny. Sarah Drasner is great and I've heard only positive things about that Front End Master's course. I'd be curious to hear what you think. 

[swampthang]

Just finished going through it. It was like a GSAP promo! Was a good overview of GSAP really. A brief section on SVGs. Gonna get her book that goes into more depth about SVGs in general.