Jump to content
Search Community

Stop it from vanishing and flipping

Zahir Rafiq test
Moderator Tag

Recommended Posts

Hi forum, 

 

I'm working on a project which zooms in and out a svg graphic, but the problem is that when I continuously  click the minus button the svg vanishes and than flips upside down:(  Is there any way that you can limit the zoom out function so that it reverts back to the svg starting point / original size? 

 

Any help will be much appreciated.

 

Zahir    

See the Pen ZEYmRpp by AlphaArt (@AlphaArt) on CodePen

Link to comment
Share on other sites

Hi @ZachSaucier

 

This is great, but how can I stop it from vanishing when the minus button is clicked continuously?

 

So basically at the start I want the user to zoom in only by clicking the plus button, and then when the user clicks the minus button the svg graphic only zooms out to the original size and stays like that until the user clicks on the plus button again to zoom in.

 

I hope this makes sense.

 

Can you show me please?

 

Many thanks,

 

Zahir

Link to comment
Share on other sites

An easy way would be to toggle a class inside of the limits function. I updated the demo above to show how. I am just applying it to the circles but you can apply it to whatever parts you need. Maybe it'd make sense to put all  the related parts for each button in a <g> element and toggle a class on that <g> element.

  • Thanks 1
Link to comment
Share on other sites

On 1/21/2020 at 5:25 AM, Zahir Rafiq said:

Is there a possibility to add a a Pinch-to-zoom function to this project as well?

Sure, you'd have to implement the logic yourself. Not all devices support pinching though. I'd look into small third party libraries that support that as I am not aware of any native way to include it. Let me know if you do discover a native way!

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.
×
×
  • Create New...