Dragging masked SVG path

[Pola86 8 Likes (Newbie)]

Hello everyone,

 

I'm looking for a hint, as you can see in the Codepen attached I managed to drag a masked SVG circle around the container, problem is when I want to use a path as a mask I don't know how to get the coordinates (for path there's no "cx" and "cy").

Any suggestions on how I could accomplish this?

This is the function that does the trick with a circle

//move the mask with the drag
function onThrowUpdate() {

  var posX = parseInt(rocketHole.getAttribute('cx')) + this.target._gsTransform.x;
  var posY = parseInt(rocketHole.getAttribute('cy')) + this.target._gsTransform.y;

  TweenMax.set(rocketMask, {
    attr: {

      cx: posX,
      cy: posY

    }

  })

See the Pen KNeZOE by Polenji86 (@Polenji86) on CodePen

[OSUblake 9,990 Likes (Superhero)]

There are coordinates on a path, but you gotta do some work. I think the easiest solution might be to convert the path data to relative coordinates. That will let you modify the first Move command without affecting the rest of the path. There's a bunch of tools out there to convert it to a relative path. I just used Snap.

See the Pen 4216a3f62dc149b7fce3b2d3868629d5?editors=0010 by osublake (@osublake) on CodePen

 

I think there might be a way to get an SVGPoint from the path and animate it like I do in this post. Notice how I don't have to do any updates. Animating the point directly eliminates the need for any manual updates. I'll have to look into that.

http://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401

[Pola86 8 Likes (Newbie)]

OSUblake thanks, i'm digging into your code, stay tuned

[Pola86 8 Likes (Newbie)]

Ok it works like a charme, thanks a lot, it's like 2 days i'm looking into this.. you are my new god i'm gonna worship you

[Dipscom 2,815 Likes (Superhero)]

Pola86, I'd say you should consider putting Jonathan, Diaco, PointC, Carl and Greensock himself in your pantheon of gods to worship...

 

I certainly say my prayers to them.

[Dipscom 2,815 Likes (Superhero)]

BEHOLD MERE MORTALS!

 

 

 

 

THE PANTHEON

 

 

[PointC 8,599 Likes (Superhero)]

Ha!   

 

I see the next installment of Dipscom's Photoshop Adventures has been published. 

 

I wonder if Blake will respond with another new CodePen similar to 'Kim Jong Dipscom'? 

 

Nice work Sir Pedro.

[Pola86 8 Likes (Newbie)]

Yep thx everyone, keep up with the good work i'm your fan 

Btw if someone's interested and needs something similar this is the final result 

See the Pen mOjKgj by Polenji86 (@Polenji86) on CodePen

.

[OSUblake 9,990 Likes (Superhero)]

   

 

Love it!!!

 

A poster of this should be included with the Club GreenSock membership.

 

The only thing I don't like about it is my character. Everybody else is doing something cool, like levitating or holding a weapon. I'm stealing fish??? If you're going to associate fish with me, at least give me some explosives.

[Dipscom 2,815 Likes (Superhero)]

   

 

Love it!!!

 

A poster of this should be included with the Club GreenSock membership.

 

The only thing I don't like about it is my character. Everybody else is doing something cool, like levitating or holding a weapon. I'm stealing fish??? If you're going to associate fish with me, at least give me some explosives.

 

If someone could track down Jonathan in the real world and snap a picture of him, I would order a printed poster myself.

 

As for you and your fish, Blake, I think it is a fitting match. Must say that I did not think you were stealing the fish, more like you were the lord of them fishes... Diaco hasn't complained about having a lamb. 

[Jonathan 5,176 Likes (Superhero)]

Yeah but im the only one with no pants or robe covering himself

[Pola86 8 Likes (Newbie)]

Hey guys, does Snap.svg has some issues with Firefox? I can't make it work while on Chrome and IE I have no problems

 

http://s.codepen.io/Polenji86/debug/vyVxwO

[Pola86 8 Likes (Newbie)]

In the console when i digit window.TweenMax it returns undefined, has this something to do with which order I call the scripts?

[Pola86 8 Likes (Newbie)]

So i figured out the problem, Firefox can't render svg in display:none.. someone has a solution for this?

[Jonathan 5,176 Likes (Superhero)]

Hello Pola86

 

That has to do with the way the SVG spec is. So any element with display none will be removed from the render tree.

 

You can find more about that here:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display

 

When applied to a container element, setting display to none causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with display="none" will never be rendered even if the child has a value for display other than none.

• When the display attribute is set to none, then the given element does not become part of the rendering tree.

So you either have to use the visibility attribute on your SVG element or use visibility:hidden in your css

 

Resources:

SVG visibility attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility

CSS visibility property: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

 

[Pola86 8 Likes (Newbie)]

Hello Pola86

 

That has to do with the way the SVG spec is. So any element with display none will be removed from the render tree.

 

You can find more about that here:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display

 

When applied to a container element, setting display to none causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with display="none" will never be rendered even if the child has a value for display other than none.

• When the display attribute is set to none, then the given element does not become part of the rendering tree.

So you either have to use the visibility attribute on your SVG element or use visibility:hidden in your css

 

Resources:

SVG visibility attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility

CSS visibility property: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

 

Thanks Jonathan, very helpful, now it's working like a charme, thanks everybody