svelte working with HTMLObjectElements seems.. buggy?

i need to embed an svg element in my svelte project.

i am trying to do it like this:

<script>let svg_path = 'https://microbeatlas.org/media/taxon_env_svgs/cb189.prevalence.90_9.svg';</script><object data={svg_path} type="image/svg+xml" />

now, I would like to add some event listeners to certain Ids (essentially highlighting the corresponding elements in some table somewhere), however svelte seems to resist.

if write the code above I can go to the site and see the element displayed. however if I open the console and type

document.getElementById("prevalence;soil;shrub")

I get null. sometimes this changes if I open the developer tools and hover over the element or something (I don't know what exactly it is). Point is, I have no idea how to consistently get specific elements in the SVG.

when I paste the svg_path directly into the browser to open the SVG, then enteropen the console and type

document.getElementById("prevalence;soil;shrub")

I always get the correct element back.

ChatGpt told me to just fetch(svg_path), but this gives me issues with cors and I cant really change the backend.