No sé si esto es un error, un comportamiento indefinido o qué. Pero al cargar un SVG con el elemento <object> , JS y CSS son impredecibles cuando se trata de acceder a los elementos secundarios de ese SVG. Mejor muestro y ejemplo:

Aquí tenemos nuestro test.svg :

 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect id="myrect" x="0" y="0" width="100" height="100" /> </svg>

Y nuestro test.html :

 <object style = "max-width:300px" type = "image/svg+xml" data = "test.svg" />

Ahora cuando cargo la página puedo ver el rectángulo negro. Cuando ejecuto document.querySelector("svg") en la consola, aparece como nulo. Sin embargo, cuando inspecciono el elemento en la página y veo que de hecho hay un SVG en el dom, ejecuto ese comando nuevamente y esta vez devuelve el svg.

Por lo tanto, sin ninguna modificación, el DOM logró cambiarse a sí mismo sin ningún motivo. ¿Qué se supone que debe pasar?

captura de pantalla

Actualización sobre qué navegador estaba usando

Estaba usando Brave Versión 1.31.88 Chromium: 95.0.4638.69 (Compilación oficial) (64 bits) mientras obtenía los resultados anteriores. Mi navegador Firefox parece proporcionar un resultado diferente, es decir, JS nunca tiene acceso al SVG, independientemente de si inspecciono el elemento o no.

Posible solución (solo js)

Usando la función getSVGDocument(), tengo la capacidad de modificar el estilo.

 document.querySelector("object").getSVGDocument().querySelector("#myrect").style="fill:red";

El código anterior funciona tanto tiempo que no inspecciona el elemento en el rectángulo. Funciona todo el tiempo en firefox.

SIN EMBARGO , la solución anterior solo funciona en una nueva descarga de los datos del objeto. Si intenta actualizar, el script anterior no funcionará...

OH, SEÑOR, NO ME DÍA CUENTA DE LA AGUJERA DE CONEJO DE CHROME/MOZILLA BUGS ACABO DE ENTRAR