SVG通过img标签引入后hover状态无法变色的技术求助

问题原因 #

用<img>标签加载SVG时，SVG会被当作独立的外部资源文档，当前页面的CSS无法穿透到<img>内部的SVG元素（比如<path>），所以设置.icon-image:hover { stroke: white }不会生效。

解决方案 #

方法1：直接嵌入SVG到DOM中（推荐） #

把SVG作为组件或直接插入DOM结构，而非通过<img>加载，这样CSS就能选中SVG内部的元素。

代码修改示例（React场景）：

如果是本地SVG文件，先导入为组件：

// 假设SVG文件路径为./icons/xxx.svg
import IconSample from './icons/sample.svg';

// 假设DataBanner数据结构为包含SVG组件的数组
const DataBanner = [
  { icon: IconSample },
  // ...其他图标项
];

// 渲染逻辑
{DataBanner.map((d, index) => (
  <div key={index} className="icon-wrapper">
    {d.icon}
  </div>
))}

如果是动态获取的SVG字符串，使用dangerouslySetInnerHTML插入：

{DataBanner.map((d, index) => (
  <div key={index} className="icon-wrapper">
    <div dangerouslySetInnerHTML={{ __html: d.icon }} />
  </div>
))}

对应CSS：

/* 默认stroke颜色 */
.icon-wrapper path {
  stroke: black;
}
/* hover时修改stroke颜色 */
.icon-wrapper:hover path {
  stroke: white !important; /* 若SVG内有stroke内联属性，需要!important覆盖 */
}

方法2：使用<object>标签替代<img> #

<object>标签加载的SVG允许外部CSS穿透，但需要注意同源限制，写法如下：

{DataBanner.map((d, index) => (
  <div key={index}>
    <object
      data={d.icon}
      type="image/svg+xml"
      className="icon-object"
    />
  </div>
))}

对应CSS：

.icon-object:hover path {
  stroke: white;
}

注意：如果SVG来自跨域资源，此方法可能因浏览器安全策略失效。

关键注意点 #

• 若SVG的<path>标签带有stroke="black"这类内联属性，需要用!important提升CSS优先级来覆盖，或者直接移除SVG内的stroke属性，改用CSS控制默认颜色。

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