如何使用JavaScript动态修改SVG路径的title文本？

有几种简单的方式可以实现这个需求，本质就是常规的DOM元素操作：

• 方法一：通过选择器精准定位title元素
  先通过id获取目标path元素，再用querySelector找到它内部的title标签，最后修改文本内容：

  // 获取id为path0的path元素
  const pathEl = document.getElementById('path0');
  // 找到path下的title子元素
  const titleEl = pathEl.querySelector('title');
  // 设置新的标题文本
  titleEl.textContent = '这里是新的标题内容';
  

• 方法二：通过子元素索引获取title
  如果确定title是path的第一个子元素，也可以直接通过children属性获取：

  const pathEl = document.getElementById('path0');
  const titleEl = pathEl.children[0];
  titleEl.textContent = '更新后的标题文本';
  

注意：优先使用textContent修改文本，它只会处理纯文本内容，能避免潜在的XSS安全问题；如果特殊场景需要插入HTML内容（title元素一般不需要），可以用innerHTML，但不推荐这么做。

内容的提问来源于stack exchange，提问作者Squeaky Fox