How to Zoom & Center to an element in SVG

[qualityCode]

I need help trying to scale and center to a certain element within an svg.  I am using jquery.ui.layout, tweenmax and draggable.

 

I use getBBox() to get the group element's location in the svg file, and then use the values here:  TweenLite.to(svgness, 1.5,  scaleX: 3,  scaleY: 3,     svgOrigin: x + " " + y  });

 

It sort of works, but then the element is not really centered in the window.

See the Pen LGBGEj by AlmaTheYounger (@AlmaTheYounger) on CodePen.

[PointC]

Hi qualityCode  ,

 

Welcome to the forums. 

 

Have you tried animating the viewBox instead of scaling? I made a pen a while back that did just that. IMHO it might just make your life a lot easier.

 

Take a look - maybe it can help you a bit:

See the Pen XbqBmM by PointC (@PointC) on CodePen.

 

Happy tweening. 

 

[Jonathan]

Nice solution PointC!

[Carl]

Love it!

[qualityCode]

Thanks very much.  This worked nicely.

[qualityCode]

Hi qualityCode  ,

 

Welcome to the forums. 

 

Have you tried animating the viewBox instead of scaling? I made a pen a while back that did just that. IMHO it might just make your life a lot easier.

 

Take a look - maybe it can help you a bit:

See the Pen XbqBmM by PointC (@PointC) on CodePen.

 

Happy tweening. 

 

Hi again, when I animate the viewbox, then drag, the content outside the new viewbox is missing.  Is there any way to see it?  Here is my codepen:

http://s.codepen.io/AlmaTheYounger/debug/LGBGEj

Thank you.

[GreenSock]

Maybe try adding this CSS: 

#theSVG {
  overflow: visible;
}

Is that what you're looking for?

 

or maybe wrap it in a <g> or even another <svg> and make the inner one draggable instead of the whole (outer) container. 

[sabird]

PointC, would your viewBox animation effect be able to be applied to an item inside a Canvas object created with Adobe Animate CC? If so, could you give some direction as to how? Thanks!!

 

On 2/1/2016 at 6:07 PM, PointC said:

Hi qualityCode  ,

 

Welcome to the forums. 

 

Have you tried animating the viewBox instead of scaling? I made a pen a while back that did just that. IMHO it might just make your life a lot easier.

 

Take a look - maybe it can help you a bit:

See the Pen XbqBmM by PointC (@PointC) on CodePen.

 

Happy tweening. 

 

[Carl]

Hi Sabrid,

 

Nothing that PointC's viewBox technique can really be applied to canvas as there is no viewBox or anything quite like it.

 

You might want to look into Snap.svg Animator which allows you to export svg animations and art from Animate CC

 

https://exchange.adobe.com/addons/products/12329#.WpghkhMbMUE

 

There is also a video by CJGammon that shows a bit how it works out there as well.

 

Once you export your Animate CC work as SVG then you will probably have some success animating the viewBox.

I've never used Snap.svg Animator and it has nothing to do with GreenSock so we don't offer any support on how to set it up and use it but the github repo should have good instructions to get you started.

[PointC]

Yeah - as @Carl mentioned, there isn't a viewBox for canvas. You can certainly zoom and pan all around canvas if you want though.

 

A quick search on CodePen shows a few results. Maybe they'll give you some ideas too.

See the Pen by search (@search) on CodePen.

 

Happy tweening.

 

[sabird]

Thank you both for your quick replies. 

 

I'm afraid I need to retain the complex structure and interactivity of the content exported by Animate CC, so converting it to an svg would not be ideal. Previous searches had already turned up many of the examples you have linked to, but I liked the look and motion of your solution the best. Is there any relatively simple way to pan and zoom to a specific target rectangle within the canvas element using GSAP? I am an actionscript refugee and trying to figure out how to duplicate some of my previous functionality in this new and foreign land 

[OSUblake]

Hi @sabird

 

There's nothing special about a view box. It describes what part of the canvas should be visible. Without getting into aspect ratios and the viewport, a view box in canvas could be as simple as this.

 

var viewBox = {
  x: 0,
  y: 0,
  width: 1000,
  height: 1000
};

context.scale(canvas.width / viewBox.width, canvas.height / viewBox.height);
context.translate(-viewBox.x, -viewBox.y);

 

 

The same animation used in @PointC 's demo.

 

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

 

 

I'm not familiar with AnimateCC, but I know you can do something similar to that using some type of container. If you need help, try to make a simple Create/EaselJS demo on CodePen.

 

[PointC]

Ha! I knew @OSUblake would be pulled into this thread. I think he has a 6th sense when the word canvas is mentioned in a topic. 

[sabird]

Wow, thanks. That looks quite promising. 

[Sahil]

@PointC what happens when someone holds candle in dark, in front of mirror and whispers canvas three times?

[OSUblake]

On 3/2/2018 at 10:38 AM, PointC said:

Ha! I knew @OSUblake would be pulled into this thread. I think he has a 6th sense when the word canvas is mentioned in a topic. 

 

Yup. Email filters. 

 

Canvas related questions are always more interesting to me.