Jump to content
Mat-Moo

SVG rotation and tranformOrigin

Recommended Posts

I'm trying to get a square to rotate around an origin whilst getting larger, however I think the origin needs to move, or do I need to use a static rect to do the rotation, with an inner rect that I grow in size (scale is no good as the line get larger which I don't want).

 

TIA - Mat

 

http://jsbin.com/gilale/edit?html,js,output

Share this post


Link to post
Share on other sites

Hi Mat-Moo :),

 

Would this work for you?

 

See the Pen KdrKGz by PointC (@PointC) on CodePen

 

 

Edit: Whoops - just re-read your post and you don't want to use scale. So you want the square to get wider and taller, but the stroke to stay at 50px?

Share this post


Link to post
Share on other sites

Hi Mat-Moo  :)

 

pls try like these ways :

TweenMax.to(el2, 10, {attr:{width:800,height:800,x:100,y:100},rotation:360,transformOrigin:"center"});

// or 

TweenMax.to(el2,10,{transformOrigin:"center",rotation:360,scale:800/600});

and about scaling issue , maybe this can help you  : vector-effect="non-scaling-stroke"

 

http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke

  • Like 5

Share this post


Link to post
Share on other sites

@Diaco - I didn't know that non-scaling-stroke existed. Very cool! I do love learning on this forum! :)

 

@Mat-Moo I added Diaco's suggestion of a non-scaling-stroke to my pen in Post #2 so I think it should be what you're looking to accomplish. I hope it helps.

Share this post


Link to post
Share on other sites

It's the transformOrigin Center that solved it, brill... almost :)

 

So I have http://jsbin.com/gilale/edit?html,js,output pretty much what I was after, but what about a different shape, lets say a star where I want to do the same thing. The square is easy as I can animate the left/right/width/height but a start which would be a polygon, can't really animate all the points? non-scaling stroke kind of works but then you can see the gap doesn't remain consistent as the line width is always the same yet everything else is scaled

Share this post


Link to post
Share on other sites

hmm if i understood correctly , you have 2 ways to go :

 

1 - AttrPlugin ( Tween complex string-based values )  :  http://greensock.com/gsap-1-18-0

with 1.18.0 you can tween complex string-based values , but there's a point , you should to apply path/polygon with same point type / points count  , otherwise you will have a jump in your tween .

simple demo : 

See the Pen MaabXe by GreenSock (@GreenSock) on CodePen

 

 

2- MorphSVGPlugin http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/

  • Like 2

Share this post


Link to post
Share on other sites

Thanks for the replies, drawing the polygon/star isn't an issue, it's the sizing of it I wasn't sure about. 

 

For example thanks to the help here I now have http://jsbin.com/gilale/edit?html,output perfect, endless growing square, what I want to do is the same thing with a polygon/star. So as I was trying to badly explain, the square is easy just animate the width/height and x/y coords.... but I'm not sure how to animate the points, would that be using the AttrPlugin and setting a start polygon and end polygon then? (Now I write that down I think that's correct based on Diaco response)

Share this post


Link to post
Share on other sites

That's what I would do. You might be able to draw your shapes in such way so that you wouldn't have to change the x, y, or rotation.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.