嘿，作为刚接触HTML/SVG的新手，你已经搞定hover高亮已经很棒了！点击切换填充色这个需求，因为CSS没有能持久记录点击状态的伪类（:active只是按下瞬间生效），所以咱们得借助一点点JavaScript来实现，其实非常简单，给你两种常用的方案：

方案一：用CSS类切换（推荐，样式与逻辑分离） #

这种方法把颜色样式都放在CSS里，JS只负责切换类名，后期改颜色直接改CSS就行，维护起来超方便。

第一步：写CSS样式 #

先定义好原始色、hover高亮色和点击后的标记色：

/* 国家路径的基础样式 */
.country {
  fill: #e0e0e0; /* 你的原始填充色 */
  cursor: pointer; /* 鼠标移上去显示手型，提升交互感 */
  transition: fill 0.2s; /* 可选：加个颜色过渡动画，切换更丝滑 */
}

/* 鼠标悬停高亮效果 */
.country:hover {
  fill: #b0b0b0; /* 你的hover高亮色 */
}

/* 点击后的标记状态样式 */
.country.active {
  fill: #ff6347; /* 换成你想要的标记色 */
}

第二步：加JavaScript逻辑 #

给每个国家的path元素绑定点击事件，切换active类：

// 获取所有国家的path元素（假设你给这些path都加了统一的class：country）
const countryPaths = document.querySelectorAll('.country');

// 遍历每个path，绑定点击事件
countryPaths.forEach(path => {
  path.addEventListener('click', () => {
    // 切换active类：有就移除，没有就添加
    path.classList.toggle('active');
  });
});

方案二：直接操作元素的fill属性 #

如果不想用CSS类，也可以直接在JS里保存原始颜色，点击时手动切换填充色：

编写JavaScript代码 #

// 定义你的标记色
const MARKER_COLOR = '#ff6347';

// 获取所有国家path
const countryPaths = document.querySelectorAll('.country');

countryPaths.forEach(path => {
  // 把每个path的原始填充色保存到自定义属性里
  path.dataset.originalColor = path.getAttribute('fill');
  
  // 绑定点击事件
  path.addEventListener('click', (e) => {
    const currentPath = e.target;
    const currentColor = currentPath.getAttribute('fill');
    
    // 判断当前颜色：如果是标记色就恢复原始色，否则改成标记色
    if (currentColor === MARKER_COLOR) {
      currentPath.setAttribute('fill', currentPath.dataset.originalColor);
    } else {
      currentPath.setAttribute('fill', MARKER_COLOR);
    }
  });
});

注意事项 #

• 确保你的SVG是内联在HTML页面里的（不是用<object>/<iframe>引入的外部SVG），不然JS可能无法直接操作SVG元素；如果是外部SVG，需要先获取SVG的内容文档再操作。
• 检查path元素的pointer-events属性，默认是auto，如果设置成none的话，点击事件会失效。

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