vue-svg-pan-zoom : Vue 3 component for SVG-Pan-Zoom

This module is a very simple Vue 3 component providing the
goodness of SVG-Pan-Zoom for SVG elements.

/!\ WARNING: the module is young, basic, probably will have its
API change with no notice, and likely to have
bugs. Use at your own risk, send patches for my eternal gratitude.

Basic Use

In a Single File Component:

``vue



``

$3

Currently the SvgPanZoom component only works with a svg child -- embed won't work.

$3

SvgPanZoom accepts as props most svg-pan-zoom options:

| attribute | default |
| ------------------------- | ------------------------ |
| zoomEnabled | true |
| controlIconsEnabled | false |
| fit | true |
| panEnabled | true |
| dblClickZoomEnabled | true |
| mouseWheelZoomEnabled | true |
| preventMouseEventsDefault | true |
| contain | false |
| center | true |
| viewportSelector | .svg-pan-zoom_viewport |
| zoomScaleSensitivity | 0.2 |
| minZoom | 0.5 |
| maxZoom | 10 |
| refreshRate | auto |

| event | arguments |
| ------------------------- | ---------------------------------------------------------- |
| beforeZoom | (oldScale: number, newScale: number) |
| onZoom | (newScale: number) |
| beforePan | (oldPan: SvgPanZoom.Point, newPan: SvgPanZoom.Point) |
| onPan | (newPan: SvgPanZoom.Point) |
| onUpdatedCTM | (newCTM: SVGMatrix) |
| created | (spz: SvgPanZoom.Instance) |
| thumbnailCreated | (spz: SvgPanZoom.Instance) |

$3

To access the created svgpanzoom javascript object, you can
listen to the created event on the SvgPanZoom component.

`vue



`

Use with thumbnails

In a Single File Component:

`vue