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.
You just have a typo.
document.getElementByID('test');
needs to be
document.getElementById('test');
then it should work fine.