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.

@RobertLongson thanks, I forgot to do that. Please see the edited question — Munchkin, Nov 12 '21 at 11:35
@RobertLongson there is JS in my question, it's `document.getElementById('test');` as noted in the question. There's no need to put more code for a minimal reproducible example. — Munchkin, Nov 12 '21 at 11:44
@RobertLongson I'm running the JS in the browser console so far as noted in my newly edited question. — Munchkin, Nov 12 '21 at 11:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/239153/discussion-between-robert-longson-and-munchkin). — Robert Longson, Nov 12 '21 at 11:46
HTML document, but I run it in the browser console meaning it has already surely loaded — Munchkin, Nov 12 '21 at 11:46
Yes but in a different document, the contentDocument of the object element. — Robert Longson, Nov 12 '21 at 11:50

score 0 · Answer 1 · answered Nov 12 '21 at 11:27

0

You just have a typo.

document.getElementByID('test');

needs to be

document.getElementById('test');

then it should work fine.

answered Nov 12 '21 at 11:27

GoldenretriverYT

3,043
1
9
22

When I paste this into a SVG element and then do `document.getElementById('test').innerText = "hi";`, it works completely fine. – GoldenretriverYT Nov 12 '21 at 11:38
Maybe my HTML is at fault then? I use ` – Munchkin Nov 12 '21 at 11:39
Hm, I think the only way to get this working then is to directly add the SVG contents to your HTML. It should work like intended, but your HTML file might get a lot larger. – GoldenretriverYT Nov 12 '21 at 11:43
what are the differences between your code snippets? they are exactly equal each other. – nima Nov 12 '21 at 11:57
Last "d" in getElementById should be lowercase, not uppercase. – Michael Mullany Nov 12 '21 at 12:03

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

1 Answers1