SVG图片通过img引入修改颜色

通过 <img> 标签引入的 SVG 图片默认无法直接通过 CSS 修改颜色，但可通过以下方法实现颜色修改：

---

‌1. 使用 CSS filter 的 drop-shadow 技巧‌

‌原理 ‌：通过滤镜生成彩色投影，偏移后覆盖原图，隐藏原图并显示投影。

‌实现步骤‌：

1. 将 <img> 放入父容器并设置 overflow: hidden
2. 对 <img> 应用 filter: drop-shadow 生成彩色投影
3. 使用 transform 偏移原图，使投影覆盖原位置

htmlCopy Code
<div class="svg-container">
  <img src="icon.svg" class="svg-icon">
</div>

cssCopy Code
.svg-container {
  width: 50px;
  height: 50px;
  overflow: hidden;
}
.svg-icon {
  filter: drop-shadow(#ff0000 50px 0); /* 红色投影 */
  transform: translateX(-50px); /* 偏移原图 */
}

‌适用场景‌：单色修改，需固定尺寸容器。

---

‌2. 使用 mask-image 方案‌

‌原理 ‌：将 SVG 作为遮罩，通过 background-color 控制颜色。

‌实现步骤‌：

1. 用 mask-image 引入 SVG
2. 通过 background-color 设置颜色

htmlCopy Code
<div class="svg-mask"></div>

cssCopy Code
.svg-mask {
  width: 50px;
  height: 50px;
  background-color: #00ff00; /* 绿色 */
  -webkit-mask-image: url(icon.svg);
  mask-image: url(icon.svg);
}

‌优点‌：无需偏移，支持动态颜色。

---

‌3. 使用 JavaScript 动态注入 SVG‌

‌原理 ‌：通过脚本将 SVG 内联到 DOM，直接修改属性。

‌实现步骤 ‌（以 svg-inject 库为例）：

1. 安装库：npm install @iconfu/svg-inject
2. 在 <img> 标签添加 onload 事件：

htmlCopy Code
<img src="icon.svg" onload="SVGInject(this)" class="svg-injected">

cssCopy Code
.svg-injected path {
  fill: blue; /* 直接修改填充色 */
}

‌优点‌：支持多色修改，保留矢量特性。

---

‌4. 转换为 Base64 内联‌

‌原理 ‌：将 SVG 转为 Base64 编码，直接修改代码中的颜色值。

‌实现步骤‌：

1. 使用工具将 SVG 转为 Base64
2. 替换 fill 或 stroke 属性值

htmlCopy Code
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL..." alt="SVG">

‌缺点‌：需手动修改代码，灵活性低。

---

‌注意事项‌

• ‌浏览器兼容性 ‌：mask-image 需前缀，drop-shadow 在旧版浏览器可能失效14。
• ‌性能影响‌：复杂滤镜可能增加渲染负担6。

根据项目需求选择合适方案，优先推荐 mask-image 或 JavaScript 注入