vue-svg-pan-zoom/README.mkd

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

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

/!\ WARNING: the module is young, basic, and likely to have bugs. Use at your own risk, send patches for my eternal gratitude.

Basic Use

In a Single File Component:

<template>
    <SvgPanZoom 
        style="width: 500px; height: 500px; border:1px solid black;"
        :zoomEnabled="true"
        :controlIconsEnabled="true"
        :fit="false"
        :center="true"
    >
        <svg>
            <circle x="10" y="10" r="5" />
        </svg>
    </SvgPanZoom>`
</template>

<script>
    import SvgPanZoom from 'vue-svg-pan-zoom';

    export default {
        components: {  SvgPanZoom },
    };
</script>

Notes

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

• SvgPanZoom accepts as attributes all 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
beforeZoom
onZoom
beforePan
onPan
onUpdatedCTM
customEventsHandler
eventsListenerElement

Use with thumbnails

In a Single File Component:

<template>
    <SvgPanZoom
        style="width: 300px; height: 500px; border:1px solid black; "
    >
        <svg> ... </svg>
        <SvgPanZoomThumbnail>
            <svg> ... </svg>
        </SvgPanZoomThumbnail>
    </SvgPanZoom>
</template>


<script>
    import { SvgPanZoom, SvgPanZoomThumbnail } from 'vue-svg-pan-zoom';

    export default {
        components: {  SvgPanZoom, SvgPanZoomThumbnail },
    };

</script>

Notes

• Just like the SvgPanZoomcomponent, SvgPanZoomThumbnail only accepts a svg child -- embed won't work.

Storybook demos

To run [Storybook][] stories duplicating the demos of the main SVG-Pan-Zoom project, do

$ yarn install --dev
$ yarn storybook