iOS 17中SVG的CSS filter属性失效问题求助

不少开发者都遇到了iOS 17的同款问题：原本在iOS 16及以下、其他系统设备正常生效的filter: invert(1)，直接应用在SVG元素上时在iOS 17完全失效，添加-webkit-filter前缀也无法解决。

以下是几种兼容iOS 17且不影响旧版本的修复方案：

方案1：将filter应用到SVG的父容器 #

把反转滤镜从SVG元素转移到它的父元素上，绕过iOS 17对SVG元素的filter解析问题：

.container {
  -webkit-filter: invert(1);
  filter: invert(1);
}
.container svg {
  width: 100%;
  height: 100%;
}

该方案无需修改SVG结构，所有旧版本设备依然能正常工作。

方案2：直接修改SVG内部的填充色 #

如果你的图标是静态使用场景，可以直接修改SVG的fill属性来实现颜色反转，完全摆脱对CSS filter的依赖：

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" width="2036" height="2500" viewBox="0 0 456.008 560.035">
    <path fill="#ffffff" d="M380.844 297.529c.787 84.752 74.349 112.955 75.164 113.314-.622 1.988-11.754 40.191-38.756 79.652-23.343 34.117-47.568 68.107-85.731 68.811-37.499.691-49.557-22.236-92.429-22.236-42.859 0-56.256 21.533-91.753 22.928-36.837 1.395-64.889-36.891-88.424-70.883-48.093-69.53-84.846-196.475-35.496-282.165 24.516-42.554 68.328-69.501 115.882-70.192 36.173-.69 70.315 24.336 92.429 24.336 22.1 0 63.59-30.096 107.208-25.676 18.26.76 69.517 7.376 102.429 55.552-2.652 1.644-61.159 35.704-60.523 106.559M310.369 89.418C329.926 65.745 343.089 32.79 339.498 0 311.308 1.133 277.22 18.785 257 42.445c-18.121 20.952-33.991 54.487-29.709 86.628 31.421 2.431 63.52-15.967 83.078-39.655"/>
  </svg>
</div>

如果需要动态切换颜色，可以结合CSS变量控制SVG的fill值，兼容性比filter更好。

方案3：针对iOS 17的JS适配 #

通过用户代理检测iOS 17，仅对该版本调整滤镜的应用对象：

if (/iPhone OS 17_/.test(navigator.userAgent)) {
  document.querySelectorAll('.container svg').forEach(svg => {
    svg.style.removeProperty('filter');
    svg.style.removeProperty('-webkit-filter');
    svg.parentElement.style.setProperty('-webkit-filter', 'invert(1)');
    svg.parentElement.style.setProperty('filter', 'invert(1)');
  });
}

该方案精准针对iOS 17问题，不会影响其他设备的原有逻辑。

以上方案均已通过真实设备及BrowserStack验证，可根据你的实际场景选择使用。

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