SVG图标drop-shadow效果在iOS设备失效，求解决方案

针对iOS Safari中SVG图标无法显示drop-shadow滤镜的问题，可尝试以下几种有效解决方式：

• 内联SVG代码
  iOS Safari对外部引用的SVG（如<img>、<object>标签引入）滤镜支持存在兼容性问题，将SVG代码直接嵌入HTML文档中，再为内联SVG应用滤镜，能大幅提升兼容性。

示例：

<!-- 替换外部引用的img标签 -->
<svg class="svg-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 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

CSS保持原有滤镜设置即可：

.svg-icon {
  filter: drop-shadow(-4px 5px 6px #0000008c);
  -webkit-filter: drop-shadow(-4px 5px 6px #0000008c);
}

• 为SVG设置明确填充/背景
  iOS Safari可能因SVG无明确的实体填充，导致滤镜无法正常渲染。可给SVG元素或内部图形设置明确的填充属性：

.svg-icon {
  fill: #333; /* 设置与图标匹配的填充色 */
  filter: drop-shadow(-4px 5px 6px #0000008c);
  -webkit-filter: drop-shadow(-4px 5px 6px #0000008c);
}

• 在SVG内部定义滤镜
  直接在SVG文件内部定义drop-shadow滤镜并应用，这种方式在iOS上的兼容性更稳定：

<svg viewBox="0 0 24 24">
  <defs>
    <!-- 定义自定义阴影滤镜 -->
    <filter id="icon-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="6"/>
      <feOffset dx="-4" dy="5" result="offset-blur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.55"/> <!-- 对应#0000008c的透明度值 -->
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <!-- 给图形应用滤镜 -->
  <path d="M..." filter="url(#icon-shadow)"/>
</svg>

• 用伪元素模拟阴影
  若以上方法均无效，可通过容器的伪元素模拟阴影效果，避开SVG滤镜的兼容性问题：

.svg-wrapper {
  position: relative;
  display: inline-block;
}
.svg-wrapper::after {
  content: '';
  position: absolute;
  top: 5px;
  left: -4px;
  width: 100%;
  height: 100%;
  box-shadow: -4px 5px 6px #0000008c;
  z-index: -1;
}

需根据SVG的实际尺寸调整伪元素的top、left等值，确保阴影位置匹配。

内容的提问来源于stack exchange，提问作者Khaled Al Sous