本地SVG悬停填充色修改无效？已试object引入及CSS选择器，求解决方案

一、用<object>加载SVG的问题 #

用<object>引入的SVG属于独立的文档上下文，外部HTML中的CSS无法作用到它内部的元素，所以你写的#Queens path或path#Queens选择器完全起不了作用。

可行的解决办法：

• 直接修改SVG文件：把悬停样式写到SVG内部的<style>标签里，示例：

<svg xmlns="http://www.w3.org/2000/svg" ...>
  <style>
    path#Queens:hover {
      fill: yellow;
      /* 如果SVG内部原有fill样式优先级高，可加!important强制覆盖 */
      /* fill: yellow !important; */
    }
  </style>
  <!-- 其余SVG内容 -->
</svg>

• 通过JS操控SVG文档：等待<object>加载完成后，获取其内部文档并绑定事件：

const svgObj = document.querySelector('object[type="image/svg+xml"]');
svgObj.addEventListener('load', () => {
  const svgDoc = svgObj.contentDocument;
  const queensArea = svgDoc.getElementById('Queens');
  queensArea.addEventListener('mouseover', () => {
    queensArea.style.fill = 'yellow';
  });
  queensArea.addEventListener('mouseout', () => {
    queensArea.style.fill = ''; // 恢复原有颜色
  });
});

二、内嵌SVG仍无效的问题 #

内嵌后没效果，大概率是这两个原因：

• 未指定:hover伪类：你的示例代码只设置了固定填充色，没有针对悬停状态，正确写法是path#Queens:hover { fill: yellow; }
• 原有样式优先级更高：如果SVG中的path元素本身用style="fill: #xxx"直接写了填充色，外部CSS优先级不足，可添加!important强制覆盖，或者直接修改SVG内部的style属性。

另外可以检查开发者工具，确认目标元素的id确实是Queens，有没有拼写错误，元素是否嵌套在特殊命名空间中（维基百科的SVG一般不会出现这种情况）。

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