CSS @import вызывает состояние гонки с размерами текста SVG ⇐ CSS

[Anonymous]

[*]У меня есть сценарий, в котором я динамически добавляю элементы в DOM.
[*]Добавляемые элементы являются элементами SVG (различных типов). >
[*]В случае SVGTextElements у меня есть код макета, который будет просматривать ограничивающую рамку текста (

Код: Выделить всё

getBBox()

), чтобы определить, где его следует расположить.
[*]Я также использую внешние шрифты, импортированные в CSS с помощью @import

Похоже, что загрузка шрифта завершается после начальной загрузки страницы, поэтому ограничивающая рамка SVGTextElement возвращает неверные значения.
Я пробовал всевозможные комбинации ожидания загрузки и DOMContentLoaded в HTML, но, похоже, они не включают CSS, загруженный с помощью @import.
У меня есть рабочее воспроизведение проблемы здесь:
https://codepen.io/jasonpolites/pen/PwY ... itors=1111
Если вы щелкнете ссылку в примере кода, он загрузит образец в новое окно. При первоначальной загрузке «нового окна» будут отображаться неправильные данные ограничительной рамки. То есть (вероятно) это правильно для данных шрифта на момент измерения, но в конечном итоге неверно для импортированного шрифта. Если вы затем просто обновите страницу, она отобразит правильные значения.
Я мог бы загрузить файлы шрифтов и разместить их локально, но я надеюсь, что есть решение, которое означает, что мне не нужно этого делать.
Есть ли какие-нибудь способы гарантировать, что операторы @import будут полностью разрешены до выполнения кода?

Подробнее здесь: https://stackoverflow.com/questions/793 ... dimensions