XML链接跳转至SVG指定ID并高亮对应文本的实现咨询

完全可以实现点击XML表格条目后高亮SVG对应内容，核心思路是通过JavaScript监听XML中的点击事件，操作SVG文档的DOM元素添加高亮样式，具体实现步骤如下：

1. 确保SVG可被DOM访问 #

• 如果SVG是内联嵌入在HTML页面中（直接把SVG代码写在HTML里），可以直接通过页面DOM获取元素；
• 如果SVG是通过<object>或<embed>标签引入，需确保SVG与XML/HTML页面同源（同一域名/端口），避免浏览器跨域限制，这样才能通过JS访问SVG内部文档。

2. 在XML表格中添加点击触发逻辑 #

给XML中带目标ID的表格项添加点击事件，比如：

<tr id="CO1">
  <td><span onclick="highlightSVG('CO1')">点击高亮SVG对应内容</span></td>
</tr>

这里的CO1对应SVG中目标元素的class名称（和你之前SVG里的class="CO1"对应）。

3. 编写JavaScript高亮函数 #

根据SVG的引入方式，编写对应的DOM操作代码：

• 内联SVG场景：

function highlightSVG(targetClass) {
  // 清除之前的高亮
  document.querySelectorAll('.highlight').forEach(el => el.classList.remove('highlight'));
  // 找到目标SVG元素并添加高亮样式
  const targetEl = document.querySelector(`.${targetClass}`);
  if (targetEl) {
    targetEl.classList.add('highlight');
    // 可选：自动滚动到SVG目标位置
    targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
}

• <object>引入SVG场景：

function highlightSVG(targetClass) {
  const svgObj = document.getElementById('svgContainer'); // 你的<object>标签ID
  const svgDoc = svgObj.contentDocument;
  if (!svgDoc) return;
  
  // 清除之前的高亮
  svgDoc.querySelectorAll('.highlight').forEach(el => el.classList.remove('highlight'));
  // 找到目标元素并高亮
  const targetEl = svgDoc.querySelector(`.${targetClass}`);
  if (targetEl) {
    targetEl.classList.add('highlight');
    targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
}

4. 定义高亮样式 #

在页面的<style>标签或SVG内部的<style>中添加高亮样式：

.highlight {
  fill: #ff4500; /* 自定义高亮颜色 */
  font-weight: bold;
  /* 可添加更多样式，比如边框、缩放等 */
}

注意事项 #

• 若SVG与页面跨域，浏览器会禁止JS访问SVG内部DOM，需确保两者同源；
• 可以复用你之前的命名规则（XML的id与SVG的class一致），减少代码冗余；
• 如果XML是独立文件而非嵌入HTML，可将JS逻辑放在承载XML的HTML页面中，简化DOM操作。

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