How to zoom into section of SVG when clicked

[jp008]

Hi everyone, 

 

I'm working with an SVG chart and trying to add functionality where when you click on a group (coloured section) and it will zoom in on the group and display the text (see purple section). 

 

I created a new timeline and used scale for the zoom but it doesn't seem to work! Anyone have any ideas on how I can achieve this? Needs to be mobile friendly too.

 

Thanks!

 

See the Pen zYOXYxp by jp008 (@jp008) on CodePen

[OSUblake]

You're not even animating an element here. domain is just a string.

 

tl.to(domain, 0.7, {
  scale: 2.6107453265026797,
  x:-843.9161399999997,
  y:-255.47,
  ease:Power1.easeInOut,
  transformOrigin:"50% 50%"
});

 

 

What you're trying to do sounds complicated. Zooming into a certain part of an SVG is not as straightforward as you might think, and requires some careful programming. This demo shows how to do that using wheel events, although it could be replaced with a click event. It just needs to know the client point to zoom in on.

 

See the Pen MErWRb by osublake (@osublake) on CodePen

 

 

 

[jp008]

Thanks for the reply!

 

Essentially, I was trying to replicate what was happening in this pen but on the group element - 

See the Pen oLRPjY by Creedplay (@Creedplay) on CodePen

 

 

[OSUblake]

12 minutes ago, jp008 said:

Essentially, I was trying to replicate what was happening in this pen but on the group element - 

 

Yeah, you can do it like that, but you're going to have to manually calculate the x, y, and scale values for each section so it shows up exactly where you want it.

 

And in case anyone else is wondering how my demo might work with click events.

 

See the Pen df06754f4736f45005fe693f3113049b by osublake (@osublake) on CodePen

 

The first click will zoom in, second click will zoom out out. It's probably not as accurate as manually defining the x, y, and scale values because it zooms into exactly where you click, so what you're trying to show might not be centered.

[jp008]

Okay thanks. Looks like its way more complicated than I originally thought. 

 

Thanks for your help!

 

 

[alexandrosb]

I know you probably either gave up or moved on but since this helped me with my own problem I am posting it here anyway.

 

adapting your codepen to use @OSUblake code. you just need to move the text inside the same group as the slices for getBBox to work.

 

See the Pen ExjjrKV by alexandrosb (@alexandrosb) on CodePen