IonicV4 - inline SVG image disappears

Bug report

I am upgrading an application from Ionic-v3 to Ionic-v4. My app has an inline SVG image and is very simply setup.

Expected behaviour

Simple inline SVG image will display and pan/zoom while using IonicV4.

Actual behaviour

It works great in V3 but in V4, upon setting up the library to connect to the SVG, the SVG image disappears.

Steps to reproduce the behaviour

I forked a rough Ionic V4 boilerplate at the following URL. It gives some TypeErrors upon changing code - but that is not the issue. You can just refresh to get rid of those.

https://stackblitz.com/edit/ionic-v4-angular-tabs-svgpanzoom

Tab one has the full setup while tab 2 has svgPanZoom(elm, options) commented out.

In Tab 1, the SVG image no longer displays and interacting with the screen throws errors (ERROR Error: Failed to execute ‘inverse’ on ‘SVGMatrix’: The matrix is not invertible).

In Tab 2, the SVG still displays because it hasn’t been setup.

The only difference between the two tabs is the svgPanZoom init.

Configuration

• svg-pan-zoom version: 3.6.1
• A relevant example URL: https://stackblitz.com/edit/ionic-v4-angular-tabs-svgpanzoom

[bsbechtel]

So I figured out what’s going on here. See this issue. Basically your svg dimensions are not known when the component is initialized, as is the same with all ionic components, because they are based on web components. The easy fix is to wrap your zvg-pan-zoom initializer in a setTimeout function. The right and hard way to do it is to hook into your ionic lifecycle methods or wait for the web component to fire a ready event.

[bsbechtel]

So I have a project that works on the web, and the implementation is exactly the same as the Ionic implementation, and I’m seeing the same issue with the graphic element being added improperly.

I’ve done a little digging, and with Ionic, so far from what I can tell the getBoundingClientRectNormalized method in svg-utilities is returning 0 values for all properties in Ionic. Not sure what’s causing this yet, but that appears to be the root cause of the issue.

Edit: The web project uses Angular 8, so that helps narrow the issue to Ionic, as the implementations are otherwise identical.