How do you access a tspan inside a SVG text tag?

Question

I have imported an SVG using and I'm trying to access the <tspan> innerText, because I need to change it, but when I add an id="test" to the tspan using document.getElementById('test'); yields no results whatsoever...

How can I solve this problem?

I am aware that I can change the inner text by using element.innerText, but my result is null...

My SVG:

 <text transform="translate(42.88 166.17)" style="font-size: 12px;font-family: SegoeUI, Segoe UI">Test test<tspan x="135.69" y="0" style="letter-spacing: -0.0634765625em">T</tspan><tspan x="141.38" y="0">esting</tspan><tspan x="0" y="18">Just a test</tspan><tspan x="0" y="36">test</tspan><tspan id="test" x="0" y="72">Change me via JavaScript</tspan></text>

My HTML:

<div class="sidebar">
            <object id="sidebartoggle" data="/graphics/test.svg" type="image/svg+xml" onclick="toggleSidebar();" style="top:50%;right:1%;position:fixed;display:flex;justify-content:flex-end;width:500px;transform: translateX(99%); z-index:9999999;" >
            </object>
            </div>

I'm running the JS in the browser console so far.

Answer 1

You just have a typo.

document.getElementByID('test');

needs to be

document.getElementById('test');

then it should work fine.