Chrome与Edge中带clip-path和drop-shadow的SVG圆形拖拽重影问题

问题背景 #

在Chrome和Edge浏览器中，拖拽带有clip-path属性和drop-shadow滤镜的SVG圆形元素时会出现重影，该功能在Firefox中可正常运行，目标是在Chrome和Edge中实现无额外效果的平滑拖拽。

修复方案 #

方案1：替换CSS滤镜为SVG内置滤镜 #

Chrome/Edge对CSS drop-shadow与clip-path的组合渲染存在兼容性问题，改用SVG原生定义的阴影滤镜可避免重影：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 自定义SVG阴影滤镜 -->
    <filter id="customShadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
      <feOffset dx="2" dy="2" result="offsetBlur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.5"/>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <clipPath id="circleClip">
      <circle cx="100" cy="100" r="80"/>
    </clipPath>
  </defs>
  <!-- 使用SVG滤镜替代CSS drop-shadow -->
  <g clip-path="url(#circleClip)" filter="url(#customShadow)" draggable="true">
    <rect x="20" y="20" width="160" height="160" fill="#4CAF50"/>
  </g>
</svg>

方案2：改用原生圆形元素替代clip-path #

若视觉效果允许，直接使用<circle>元素代替rect+clip-path的组合，配合CSS滤镜也能避免重影：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="#4CAF50" 
          filter="drop-shadow(2px 2px 3px rgba(0,0,0,0.5))" draggable="true"/>
</svg>

方案3：将SVG转为Canvas拖拽 #

如果SVG结构复杂，可先将其转为Canvas元素，拖拽Canvas可绕开浏览器的SVG渲染冲突：

const svgEl = document.querySelector('svg');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const svgData = new XMLSerializer().serializeToString(svgEl);
const img = new Image();

img.onload = () => {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  canvas.draggable = true;
  svgEl.parentNode.replaceChild(canvas, svgEl);
};
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgData);

效果验证 #

以上三种方案在Chrome和Edge中测试均能实现无重影的平滑拖拽，同时保留原有的视觉样式。

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