IE11不支持CSS filter:brightness属性的兼容方案咨询

IE11对CSS filter: brightness() 的支持确实很有限，尤其是在SVG背景图上，旧的ms-filter语法也因为IE11放弃了部分DX滤镜支持而失效。这里有几个可行的替代方案，你可以根据需求选择：

方案1：使用SVG内部滤镜（最推荐） #

IE11支持SVG内置的<filter>元素，我们可以在SVG中定义亮度滤镜，然后在CSS中引用它。步骤如下：

1. 首先，把你的SVG图标内联到HTML中（或者作为外部资源），并添加一个<filter>定义：

<svg style="display: none;">
  <defs>
    <!-- 定义亮度滤镜，brightness值通过feComponentTransfer的slope属性调整 -->
    <filter id="brightness-100">
      <feComponentTransfer>
        <feFuncR type="linear" slope="1"/>
        <feFuncG type="linear" slope="1"/>
        <feFuncB type="linear" slope="1"/>
      </feComponentTransfer>
    </filter>
    <!-- 示例：亮度提升到200% -->
    <filter id="brightness-200">
      <feComponentTransfer>
        <feFuncR type="linear" slope="2"/>
        <feFuncG type="linear" slope="2"/>
        <feFuncB type="linear" slope="2"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <!-- 你的心形SVG路径 -->
  <symbol id="heart-icon" viewBox="0 0 24 24">
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
  </symbol>
</svg>

2. 然后在CSS中引用这个滤镜，同时兼容IE11：

.icon {
  width: 50px;
  height: 50px;
  background: url("#heart-icon") no-repeat center;
  background-size: contain;
  /* 现代浏览器和IE11都支持的SVG滤镜引用 */
  filter: url("#brightness-100");
}

.icon.brighter {
  filter: url("#brightness-200");
}

这个方案的优势是真正实现了亮度调整，而且IE11能完美识别SVG滤镜。

方案2：直接修改SVG的填充色（如果效果需求允许） #

如果你的目标只是切换灰色和白色的心形，其实可以不用滤镜，直接通过CSS控制SVG的fill属性。比如：

1. 内联SVG图标：

<svg class="icon" viewBox="0 0 24 24">
  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>

2. CSS控制颜色：

.icon {
  width: 50px;
  height: 50px;
  fill: #ccc; /* 灰色 */
}

.icon.white {
  fill: #fff; /* 白色 */
}

这个方法更高效，也完全兼容IE11，适合只需要切换固定颜色的场景。

方案3：用伪元素叠加模拟亮度 #

如果必须使用背景图且不能修改SVG，可以通过叠加半透明图层模拟亮度变化：

.icon {
  position: relative;
  width: 50px;
  height: 50px;
  background: url("your-heart.svg") no-repeat center;
  background-size: contain;
}

/* 模拟brightness(200%)的效果，调整透明度控制亮度 */
.icon.brighter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none; /* 不影响元素交互 */
}

这个方法是模拟效果，不是真正的滤镜，但能在IE11中达到类似的视觉效果。

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