for dynamically appended svg, im getting this error

[sharpvarun]

Uncaught DOMException: Failed to execute 'inverse' on 'SVGMatrix': The matrix is not invertible.
at SvgPanZoom.zoomAtPoint (http://localhost/school/js/svg-pan-zoom.js:753:52)
at SvgPanZoom.handleMouseWheel (http://localhost/school/js/svg-pan-zoom.js:724:8)
at SVGSVGElement.wheelListener (http://localhost/school/js/svg-pan-zoom.js:667:19)

observation: initial transform matrix is setting to zero, here's how it's setting: transform="matrix(0,0,0,0,0,0)"

svg is appended like this:
//html

[bumbu]

Hi,

Please read the support section of the Readme.
Also check the dynamic loading demo.

[sharpvarun]

I got it working, actually the problem was outside container of the SVG was hidden, but I didn't understand the logic, why should it throw matrix inversion error when it's hidden. In the console, a message should be logged saying SVG is hidden.

…

On Sat, Jun 17, 2017 at 3:51 PM, bumbu ***@***.***> wrote: Closed #247 <#247>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#247 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYZCaWGSVWWT9XIIea8OUM4noPZGr_i7ks5sE6jFgaJpZM4N4WZg> .

[bumbu]

That depends on the browser implementation, some browsers are detaching foreign objects (like iframe, svg) when an ancestors is hidden. It would be possible for the library to check at any event that all parent elements are visible, but that's computationally inefficient and too specific. The developer should be responsible for knowing when to initialise the library.

Also see this comment.

[sharpvarun]

Ok. Thanks for the reply and the awesome library.

…

On Jun 17, 2017 4:14 PM, "bumbu" ***@***.***> wrote: That depends on the browser implementation, some browsers are detaching foreign objects (like iframe, svg) when an ancestors is hidden. It would be possible for the library to check at any event that all parent elements are visible, but that's computationally inefficient and too specific. The developer should be responsible for knowing when to initialise the library. Also see this comment <#105 (comment)> . — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#247 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYZCaXT6s9z8mA565O3ZkVMTWWXhO4nCks5sE64KgaJpZM4N4WZg> .

[jacobwindsor]

I had this same issue when SVG mounted to DOM and fixed it by just giving a height and width to the container. Any value works it seems, even %

[m-podlesny]

Thanks for inspiration @jacobwindsor. What was working for me is:

// view.tsx
      <div className={classes.container} ref={setRef}>
        <svg viewBox={`0 0 ${width} ${height}`} style={{ width, height }}>
          <g className="svg-pan-zoom_viewport">
            <image x="0" y="0" xlinkHref={url} width={width} height={height} />
          </g>
        </svg>
      </div>

• classes.container has width: "100%" and height: "100%" CSS props, but it wasn't enough in my case.
• setRef creates the ref from which some React hook/helper reads the rendered size in pixels, that are available by width and height variables (given to the svg and image elements)

[HammadManzoor]

Faced the same issue. The problem occurs when you try to use reset when the container for the svg is not visible on the viewport. I fixed it by checking for this before performing reset.

const divElement = this.el.nativeElement.querySelector( '#myContainer' ); if (divElement) { const viewportHeight = window.innerHeight; const divOffset = divElement.getBoundingClientRect().top; // Check if the div is in the viewport if (divOffset < viewportHeight) { this.svgPanZoom.resize(); this.svgPanZoom.reset(); } }