如何访问 SVG 文本标签内的 tspan？ [复制]答案

【问题标题】：How do you access a tspan inside a SVG text tag? [duplicate]如何访问 SVG 文本标签内的 tspan？ [复制]
【发布时间】：2021-12-24 18:15:15
【问题描述】：

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

我该如何解决这个问题？

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

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

【问题讨论】：

@RobertLongson 谢谢，我忘了这样做。请查看已编辑的问题
@RobertLongson 我的问题中有 JS，如问题中所述，它是 document.getElementById('test');。无需为最小的可重现示例添加更多代码。
@RobertLongson 到目前为止，我正在浏览器控制台中运行 JS，正如我新编辑的问题中所述。
让我们continue this discussion in chat。
HTML 文档，但我在浏览器控制台中运行它意味着它肯定已经加载了

标签： javascript html svg tspan

【解决方案1】：

你只是打错了。

document.getElementByID('test');

需要

document.getElementById('test');

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

【讨论】：

抱歉，我在输入示例时打错了字，而不是在 JavaScript 控制台中
你能告诉我你的tspan吗？
编辑问题
当我将它粘贴到一个 SVG 元素中然后执行document.getElementById('test').innerText = "hi"; 时，它完全可以正常工作。
也许我的 HTML 有问题？我使用<object>。再次编辑问题以包含此信息