I want to change the path of a svg that I've placed into a page like this:

    <div class="sx">
        <svg  width="250px" height="250px">
            <style>
                @import url(style.css);
            </style>

            <use id="anID"  href="test.svg#svg5" />
        </svg>
    </div>

the style is applied fine onto the test.svg, but the use is creating a shadow root which is not public.

I'm wondering if I can get the same styling results in another way (maybe via an <object> declaration) and at the same time getting access to the used svg nodes via the DOM.