javascript - 如何访问 SVG 文本标签内的 tspan？

Question

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

我怎么解决这个问题？

我知道我可以使用 更改内部文本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');

那么它应该可以正常工作。