You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何访问SVG中text标签内的tspan元素并修改其文本内容

解决方案

问题原因

标签加载的外部SVG属于独立的嵌入文档,和主页面的document是完全隔离的,主页面的DOM查询无法直接穿透到嵌入的SVG文档内部,因此直接调用document.getElementById('test')只能查询主页面DOM,必然返回null。

操作步骤

控制台临时测试(需等页面完全加载完成后执行)

按顺序执行以下代码即可:

// 先获取页面中的object元素
const svgObj = document.getElementById('sidebartoggle');
// 获取SVG内部的独立文档对象
const svgDoc = svgObj.contentDocument || svgObj.getSVGDocument();
// 在SVG文档内查询目标tspan
const targetTspan = svgDoc.getElementById('test');
// 修改文本,SVG元素推荐用textContent,兼容性优于innerText
targetTspan.textContent = '替换后的新文本';

页面脚本集成写法(自动处理加载时机)

把以下代码放入页面的

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.26 23:45:02