无法通过CSS属性修改SVG填充颜色，求非嵌入替代方案

你当前用<img>标签引入SVG时，外部CSS的color无法穿透到SVG内部（因为<img>加载的SVG是独立文档上下文），哪怕SVG里用了currentColor也不会生效。下面是几种无需直接嵌入SVG的替代方案：

方案1：CSS Filter 阴影技巧（完全不修改SVG） #

利用drop-shadow滤镜生成和图标形状一致的彩色阴影，再把原图标透明化，模拟填充色效果：

.close-icon {
  /* 生成蓝色阴影，偏移量设为0，大小和图标一致 */
  filter: drop-shadow(0 0 0 blue);
  width: 64px;
  height: 64px;
  /* 隐藏原图标，只显示阴影 */
  opacity: 0;
}

注意：此方法仅支持单色填充，复杂图标可能出现轻微边缘模糊。

方案2：用<object>标签替代<img>（支持多色，无需改SVG） #

将<img>换成<object>，SVG会和主页面共享CSS上下文，可直接通过外部CSS控制内部元素：

修改后的HTML： #

<object class="close-icon" data="icons/close-icon.svg" type="image/svg+xml" alt="close icon"></object>

对应的CSS： #

.close-icon path {
  fill: blue;
}

优点：支持给SVG内不同元素设置不同颜色，完全不修改SVG文件；现代浏览器兼容性良好。

方案3：给SVG添加CSS变量（轻微修改SVG，灵活性最高） #

仅需在SVG的fill属性中添加CSS变量，之后用<img>引入也能通过外部CSS控制颜色：

修改后的SVG： #

<svg 
    width="64" 
    height="64" 
    viewBox="0 0 16 16" 
    xmlns="http://www.w3.org/2000/svg">
    <path
        fill="var(--svg-fill, currentColor)"
        d="M11.293 3.293a1 1 0 1 1 1.414 1.414L9.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L6.586 8 3.293 4.707a1 1 0 0 1 1.414-1.414L8 6.586z"
    />
</svg>

外部CSS设置颜色： #

.close-icon {
  --svg-fill: blue;
}

优点：既保留<img>引入的便利性，又能随时通过CSS变量修改颜色，还支持currentColor作为默认 fallback。

内容的提问来源于stack exchange，提问作者Mészáros Benedek