Uncaught InvalidStateError: Failed to execute 'inverse' on 'SVGMatrix': The matrix is not invertible.

[aminaba11]

Hello !

I'm using the library to enable zoom functionality on multiple SVG images on the same page. While it works fine for the first image, the second image occasionally doesn't appear until the page has been refreshed multiple times (When I verified I found that it take 0 as values : transform="matrix(0,0,0,0,0,0)" style="transform: matrix(0, 0, 0, 0, 0, 0);" ). I just want to confirm if the library is designed to handle this situation as well.

I did the test on both web browsers Chrome and Microsoft edge.

Thank you!

[superdameng]

同问这个问题，我是在element plus 的dialog中使用svgpanzoom的，但是弹窗中的svg不显示

[dmayerdesign]

For me it was because my React view had not fully rendered the SVG. A setTimeout did the trick.

[eliandoran]

I had a similar issue in React as well.
Whenever the size of the container changed, I would resize and fit it:

const width = useElementSize(containerRef);
useEffect(() => {
    if (!zoomRef.current) return;
    zoomRef.current.resize().fit().center();
}, [ width ]);

The problem appeared when hiding and showing the same element (in a modal). The fix was simply to extend the guard condition not to resize if the width is zero (i.e. element is not shown).

-if (!zoomRef.current) return;
+if (!zoomRef.current || (width?.width ?? 0) === 0) return;