<div class="zoom-wrapper" v-bind:style="{ width: svgWidth + 'px', height: svgHeight + 'px' }">

        <svg ref="svg" v-bind:width="svgWidth" v-bind:height="svgHeight">

                v-bind:width="svgWidth" v-bind:height="svgHeight"

            this.data('x', params.x);

            this.data('y', params.y);

            this.drag(onMove, limitStartDrag, params.onEnd);

            if (this.data('x') > this.data('maxx')) {

                this.data('x', this.data('maxx'))

            };

            if (this.data('y') > this.data('maxy')) {

                this.data('y', this.data('maxy'))

            if (this.data('x') < this.data('minx')) {

                this.data('x', this.data('minx'))

            if (this.data('y') < this.data('miny')) {

                this.data('y', this.data('miny'))

            };

            this.data('ox', this.data('x'));

            this.data('oy', this.data('y'));

            'parentViewBox',

                svgWidth: 0,

                svgHeight: 0,

                loaded: false,

                viewBox: [0, 0, 0, 0],

                ratioX: 1,

                ratioY: 1,

                return this.parentViewBox[0] * this.ratioX

                return this.parentViewBox[1] * this.ratioY

                return this.parentViewBox[2] * this.ratioX

                return this.parentViewBox[3] * this.ratioY

            getCenter: function() {

                const bbox = new Snap(this.$refs.handler).getBBox();

                return {

                    x: bbox.cx / this.ratioX,

                    y: bbox.cy / this.ratioY

                }

            const svg = new Snap(this.$refs.svg);

            const handler = new Snap(this.$refs.handler);

                // The zoom needs to have the same dimensions as the viewport,

                // in order to reflect the position accordingly

                const imageSize = Math.max(img.width, img.height);

                const viewportSize = Math.max(this.viewport.width, this.viewport.height);

                const viewportRatio = imageSize / viewportSize;

                const svgWidth = (this.viewport.width * viewportRatio);

                const svgHeight = (this.viewport.height * viewportRatio);

                const viewBox = [0, 0, svgWidth, svgHeight];

                const ratioX = (viewBox[2] / this.parentViewBox[2])

                const ratioY = (viewBox[3] / this.parentViewBox[3])

                Object.assign(this, {

                    svgWidth: svgWidth,

                    svgHeight: svgHeight,

                    viewBox: viewBox,

                    ratioX: ratioX,

                    ratioY: ratioY,

                    loaded: true

                svg.attr({

                    viewBox: viewBox

                setTimeout(() => {

                    handler.limitDrag({

                        x: 0, y: 0,

                        minx: -(svgWidth / 2), miny: -(svgHeight / 2),

                        maxx: (svgWidth / 2), maxy: (svgHeight / 2),

                        onMove: function() {

                            self.$emit('move', {

                                x: this.getBBox().x / ratioX,

                                y: this.getBBox().y / ratioY

                            });

                        },

                        onEnd: function() {

                            this.node.removeAttribute('transform');

                            self.$emit('moveend')

                        }

                    });

                }, 500);

.zoom-wrapper {

    background-color: #fff;

}