Почему CSS, связанный с SVG, не загружается, если SVG вставлен с JavaScript?

Я планирую оживить SVG с помощью CSS, который загружается внутри элемента объекта, поэтому существует в своем собственном документе контента, поэтому связанный CSS моего HTML-документа там не применяется.

К счастью, SVG имеет свой собственный способ включить CSS. Вам просто нужно поставить такую ??строку перед вашим корневым <svg>элементом.

<?xml-stylesheet type="text/css" href="style.css" ?>

Если я включу эту строку вручную и загружу SVG с чистым HTML внутри <object>элемента, тогда мои правила CSS будут реализованы на SVG.

Однако я попытался автоматизировать его на стороне клиента, загрузив SVG в виде текста, вставив ссылку на таблицу стилей, создав blob из текста, наконец добавив URL-адрес blob в качестве атрибута данных <object>элемента. Это отобразило изображение и представило ту же структуру DOM в инспекторе как чистое решение HTML, но правила CSS не были реализованы.

Даже в самом простом случае, когда я загружаю SVG с помощью JS, который уже содержит ссылку на stylsheet, правила не будут применяться. Это представлено в моем самодостаточном примере с ошибкой.

В чем причина этого? Есть ли способ обойти это ограничение, не вставляя SVG непосредственно внутри HTML?