点击SVG元素切换CSS类高亮时如何同步到其他SVG的对应元素

你的原有代码存在三个核心问题：

• 你定义的duplicateEllipses是箭头函数，没有执行就直接调用classList属性，逻辑完全不生效
• 映射表的查询参数错误，应该用点击元素的ID作为key查询对应ID，而非直接传入元素对象
• 没有给第二个SVG的可点击元素绑定相同事件，无法实现反向同步效果

正确的实现步骤如下：

1. 首先构造双向映射表，同时支持SVG1到SVG2、SVG2到SVG1的ID转换：

// 示例结构，key为源元素ID，value为对应目标元素ID
const translateTable = {
  "svg1-circle1": "svg2-circle1",
  "svg2-circle1": "svg1-circle1",
  "svg1-circle2": "svg2-circle2",
  "svg2-circle2": "svg1-circle2"
  // 其余对应关系自行补充
}

2. 重写高亮逻辑，统一复用同一个高亮CSS类，减少冗余：

function highlighter () {
  // 切换当前点击元素的高亮状态
  this.classList.toggle("keyHighlight");
  // 获取对应另一侧SVG的元素ID
  const targetId = translateTable[this.id];
  if (targetId) {
    const targetEl = document.getElementById(targetId);
    targetEl && targetEl.classList.toggle("keyHighlight");
  }
}

3. 给两个SVG内所有需要响应点击的元素都绑定highlighter事件：

// 示例绑定逻辑，可根据你的实际元素选择器调整
document.querySelectorAll('#svg1 ellipse, #svg2 ellipse').forEach(el => {
  el.addEventListener('click', highlighter);
})

你只需要给两个SVG的共同父容器添加Flex布局样式即可实现并排效果：

.svg-container {
  display: flex;
  /* 可自定义两个SVG之间的间距 */
  gap: 24px;
  /* 可选：垂直居中对齐 */
  align-items: center;
}

如果不需要修改父容器样式，也可以直接给SVG元素本身添加行内块属性：

svg {
  display: inline-block;
  /* 避免默认边距导致换行 */
  margin: 0;
  vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者scott mc laughlin