如何在HTML中嵌入SVG图标并通过CSS fill修改颜色？已尝试两种方法未生效

两种方法失效的原因 #

• 标签引用SVG：浏览器会把加载的SVG视为独立资源，CSS无法穿透修改内部元素的fill属性，除非SVG本身未设置固定fill值并配合特殊处理。
• 标签引用SVG：你的写法存在几个问题：一是使用了旧标准的xlink:href（主流浏览器现已支持标准href属性）；二是外部SVG文件结构可能不规范，未用<symbol>包裹图标并设置唯一ID；三是SVG内部图形元素可能硬编码了fill值，导致外部CSS无法覆盖。

正确解决方案 #

方案1：优化标签引用（推荐，适合批量复用图标） #

步骤1：调整外部SVG文件结构

将图标内容放入<symbol>标签并设置唯一ID，同时不要给图形元素添加固定fill值：

<!-- assets/images/icon-reaction.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <symbol id="icon-reaction">
    <!-- 图标路径，不要写fill="#xxx" -->
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
  </symbol>
</svg>

步骤2：HTML中正确使用标签

给<svg>添加类名，用标准href属性指定SVG文件及内部symbol的ID：

<svg class="custom-icon" viewBox="0 0 24 24">
  <use href="assets/images/icon-reaction.svg#icon-reaction"></use>
</svg>

步骤3：CSS修改颜色

直接给<svg>的类设置fill属性：

.custom-icon {
  fill: #ff4500; /* 自定义颜色 */
  width: 32px;
  height: 32px;
}

方案2：内联SVG嵌入HTML（最直接可控） #

将SVG代码直接写入HTML，无需外部文件，CSS可直接控制样式：

<svg class="custom-icon" viewBox="0 0 24 24">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
</svg>

.custom-icon {
  fill: #2ecc71;
  width: 32px;
  height: 32px;
}

方案3：必须用标签时（不推荐，灵活性差） #

修改SVG文件，将fill设为currentColor，再通过<img>的color属性间接控制：

<!-- assets/images/icon-reaction.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
</svg>

<img class="custom-icon" src="assets/images/icon-reaction.svg" alt="reaction icon">

.custom-icon {
  color: #3498db;
  width: 32px;
  height: 32px;
}

关键注意点 #

• 无论哪种方法，SVG内部图形元素不能有硬编码的fill值，否则外部CSS无法覆盖。
• 确保SVG文件的viewBox属性设置正确，避免图标显示变形。

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