Issue loading from vue

[entity]

trafficstars

Hey buddy,

Currently facing this issue (https://github.com/bumbu/svg-pan-zoom/issues/308), not sure if its something that you would amend in the library. It only happens when using v-show or v-if with vue (so not in sight until you click something).

app.js:82134 Uncaught (in promise) DOMException: Failed to execute 'inverse' on 'SVGMatrix': The matrix is not invertible.
    at SvgPanZoom.zoomAtPoint (http://analyse.net.test/js/app.js:82134:50)
    at SvgPanZoom.zoom (http://analyse.net.test/js/app.js:82154:8)
    at SvgPanZoom.publicZoom (http://analyse.net.test/js/app.js:82172:8)
    at Object.zoom (http://analyse.net.test/js/app.js:82659:14)
    at l.createMap (http://analyse.net.test/js/app.js:83497:12542)
    at l.init (http://analyse.net.test/js/app.js:83497:1452)
    at new l (http://analyse.net.test/js/app.js:83497:46)
    at Proxy.mounted (http://analyse.net.test/js/app.js:33980:5)
    at callWithErrorHandling (http://analyse.net.test/js/app.js:28364:22)
    at callWithAsyncErrorHandling (http://analyse.net.test/js/app.js:28373:21)

[devShamim]

I had the same issue. I solved it by setting position:static; in CSS for this wrapper .svgMap-map-image

[ga676005]

I add setTimeout as a workaround. I didn't have this issue with an older vue3 version.

onMounted(() => {
  setTimeout(() => {
    const map = new svgMap({
      // ...
    })
  }, 0)
})