- I have a scenario where I’m dynamically adding elements to the DOM
- The elements being added are SVG elements (of various types)
- In the case of
SVGTextElements, I have layout code which is going to look at the bounding box of the text (getBBox()) to determine where it should be positioned - I am also using external Fonts, imported in CSS using
@import
It seems that the font download is completing after the initial page load, so the bounding box of the SVGTextElement is returning incorrect values.
I have tried all sorts of combinations of waiting for load and DOMContentLoaded in the HTML, but these don’t appear to encompass css downloaded using @import.
I have a working repro of the issue here:
https://codepen.io/jasonpolites/pen/PwYKOyo?editors=1111
If you click the link in the codepen sample, it will load the sample in a new window. This initial “new window” load will display bounding box data that is incorrect. That is, it’s (probably) correct for the font data at the time the measurement is taken, but ultimately incorrect based on the imported font. If you then just refresh the page, it will show the correct values.
I could download the font files and serve them locally, but I’m hoping there’s a solution which means I don’t have to do that.
Are there any tricks to ensure @import statements are fully resolved prior to code executing?