Ionic 3 image pinch and double tap zoom

ionic-framework, ionic2, ionic3

Solution

It seems that Ionic Scroll is facing some issues and a issue still open in Ionic Github, so I developed a component that uses Gesture to pinch and pan. This will allow you to zoom any element in the screen, images, div's and etc...

you can use the component by simple including it in your app.

Import `ZoomAreaModule.forRoot()` in your app's main module

import { ZoomAreaModule } from 'ionic2-zoom-area';

@NgModule({
    ...
    imports: [
      ...
      ZoomAreaModule.forRoot()
    ],
    ...
})
export class AppModule {}

and then you can use zoom-area component in your HTML file

`<zoom-area> <img src="image-to-zoom.jpg" alt="zoom it" /> </zoom-area> `

for more documentation and explanation you can check the Github page of zoom-area component.

https://github.com/leonardosalles/ionic2-zoom-area

Problem

I want to show a zoomable SVG image inside an ion-tab on an Ionic 3 project. The effect I am looking for is just a regular pinch and double tap zoom, nothing special. I've tried different combinations, but I can't make it work. This is what I have right now: HTML: ``` <ion-content> <ion-scroll scrollX="true" scrollY="true" zoom="true" overflow-scroll="false" class="scroll-view" min-zoom="1" maxZoom="10"> <img src="assets/img/image.svg"> </ion-scroll> </ion-content> ``` CSS: ``` .scroll-view{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } ``` Any ideas? Thanks!

Original source