如何访问SVG text标记中的tspan？

Question

我已经使用导入了SVG，并且我正在尝试访问<tspan> innerText，因为我需要更改它，但是当我使用document.getElementById('test');将id="test"添加到tspan时，无论如何都不会产生任何结果……

我该如何解决这个问题？

我知道我可以使用element.innerText更改内部文本，但我的结果为空...

我的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>

我的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>

到目前为止，我在浏览器控制台中运行JS。

Answer 1

你只是有一个打字错误。

document.getElementByID('test');

需要的是

document.getElementById('test');

那么它应该工作得很好。