如何在IE和Edge浏览器中平滑显示带clip-path的SVG

老哥，我太懂这种跨浏览器SVG兼容的糟心事儿了！你遇到的问题本质是IE和旧版Edge（基于EdgeHTML内核）对SVG clip-path的抗锯齿支持非常拉胯，而且你试的sharp-rendering属性其实是早就被废弃的非标准属性，浏览器根本不认，难怪没用。

给你几个亲测有效的解决方案，按需选：

方案1：用高斯模糊滤镜模拟抗锯齿 #

给被裁剪的元素加一个轻量的高斯模糊滤镜，再配合颜色校正来弱化锯齿。具体操作：

• 在SVG里定义一个滤镜：

<defs>
  <filter id="anti-alias">
    <feGaussianBlur stdDeviation="0.5" edgeMode="none"/>
    <feComponentTransfer>
      <feFuncA type="discrete" tableValues="0 1"/>
    </feComponentTransfer>
  </filter>
</defs>

• 给所有应用了clip-path的元素加上filter="url(#anti-alias)"，比如你的<image>和<rect>：

<image clip-path="url(#your-clip-path)" filter="url(#anti-alias)" ... />
<rect clip-path="url(#your-clip-path)" filter="url(#anti-alias)" ... />

这个方法通过极细微的模糊软化锯齿，同时保持元素主体的清晰度，不会让整个图变糊。

方案2：用Mask替换Clip-Path #

IE对SVG <mask>的抗锯齿支持比clip-path好太多，换用mask能直接解决问题：

• 把原来的裁剪路径（比如你用<clipPath>定义的内容）放到<mask>里：

<defs>
  <mask id="clip-as-mask">
    <!-- 这里放你原来clipPath里的路径形状 -->
    <path d="..." fill="white"/>
  </mask>
</defs>

• 把元素的clip-path属性换成mask="url(#clip-as-mask)"：

<image mask="url(#clip-as-mask)" ... />
<rect mask="url(#clip-as-mask)" ... />

注意mask里的形状要用白色填充，这样才能显示被遮罩的内容，黑色会遮挡。

方案3：浏览器特定降级 #

如果上面两种方法都不满足需求，还可以针对IE/旧Edge单独处理：

• 用JS检测浏览器，给SVG添加特定类，比如ie-svg-fix：

if (/MSIE|Trident|Edge\/\d./i.test(navigator.userAgent)) {
  document.querySelector('svg').classList.add('ie-svg-fix');
}

• 然后给这个类加CSS的-ms-filter（虽然旧，但IE认）：

.ie-svg-fix image, .ie-svg-fix rect {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.Blur(pixelradius=0.5)";
}

这个方法是用IE特有的模糊滤镜来弱化锯齿，缺点是会让元素稍微有点模糊，但聊胜于无。

最后再提醒一句：如果你的Edge是新版的Chromium内核，那这个问题应该不存在了，只有旧版EdgeHTML的才会有。

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