Jump to content
GreenSock

swampthang

attrPlugin use in nested SVGs

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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. :-P  

  • Like 3
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Nice Job :D

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.

:)

  • Like 1
Link to comment
Share on other sites

Ahh, thanks for the input, Jonathan.

Link to comment
Share on other sites

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. ;-)

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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)

  • Like 1
Link to comment
Share on other sites

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"/>
Link to comment
Share on other sites

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."

  • Like 1
Link to comment
Share on other sites

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
  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×