如何在独立交互式SVG的HTML命名空间元素中正确渲染HTML标记？

看起来你遇到的核心问题是：JSON里的HTML标记没有被解析成实际的HTML元素，而是被当成纯文本显示了。这通常是因为插入内容时用了文本类API而非HTML解析API，或者转义处理方式不对。下面是具体的解决步骤和代码示例：

1. 改用innerHTML插入富文本内容 #

你之前的showInfopop函数大概率是用了textContent或直接设置节点nodeValue来插入info字段，这会把所有内容当成纯文本。要让浏览器解析HTML标记，必须使用innerHTML属性。

修改你的showInfopop函数：

function showInfopop(event) {
  // 获取对应的数据
  const targetData = findInfo(event.target);
  if (!targetData) return;

  // 获取infopop区域的元素
  const popTitleEl = document.getElementById('infopop-title');
  const popContentEl = document.getElementById('infopop-content');

  // 清空旧内容（避免残留）
  popTitleEl.textContent = '';
  popContentEl.innerHTML = '';

  // 设置标题（用textContent避免标题里的意外HTML）
  popTitleEl.textContent = targetData.title;
  // 设置富文本内容（用innerHTML解析HTML标记）
  popContentEl.innerHTML = targetData.info;
}

2. 确认JSON中的HTML转义格式正确 #

你的infodata里的info字段需要是正确转义的HTML字符串，比如：

const infodata = {
  items: [
    {
      id: "element1",
      title: "示例标题",
      info: "<p>这是一段带<br>换行的<strong>富文本</strong>内容</p>"
    }
  ]
};

如果你的JSON里是用<、>这类实体转义的（比如<p>文本</p>），innerHTML也能正确解析，因为浏览器会自动把HTML实体转换为对应的标签。但如果是用反斜杠双重转义（比如\\<p\\>），你需要先对字符串进行解码，比如用decodeURIComponent或者手动替换转义字符。

3. 确保foreignObject的XHTML命名空间配置正确 #

虽然你已经声明了XHTML命名空间，但要确认foreignObject内部的容器元素正确关联了该命名空间，比如：

<foreignObject x="20" y="20" width="400" height="300">
  <div xmlns="http://www.w3.org/1999/xhtml">
    <h3 id="infopop-title"></h3>
    <div id="infopop-content" style="padding: 10px; font-size: 14px;"></div>
  </div>
</foreignObject>

这样浏览器才会把内部元素当作XHTML处理，确保innerHTML能正常工作。

额外注意：安全问题 #

如果你的infodata是从外部来源获取的，使用innerHTML会有XSS攻击的风险。但因为你是自己制作的独立SVG，数据完全可控，所以这个问题可以忽略。

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