带有“clip-path”和“drop-shadow”文件管理器的 SVG 圆形元素在拖放时在“Chrome”和“Edge”中产生重影效果

Question

在 Chrome 和边缘浏览器上使用“剪辑路径”和“投影”文件管理器样式，在拖动 SVG 圆形元素时获得重影效果。它在 Firefox 中运行良好。

jsfiddle 中的完整示例代码： https://jsfiddle.net/SindhuraGanesh/3ebzusy2/9/

svg circle {
     stroke: #125a9b;
     stroke-width: 3px;
     -moz-filter: drop-shadow(0px 0px 3px blue);
     -webkit-filter: drop-shadow(0px 0px 3px blue);
 }

// 1. Create paper, sets, and shapes

var paper = Raphael('SVG_DND_HOLDER_1', 500, 260);
var set = paper.set(),
    rect = paper.rect(10, 15, 64, 64, 5).attr({fill: 'pink'}),
    circle = paper.circle(150, 48, 32).attr({fill: 'lightblue'});

            var _svgNS = 'http://www.w3.org/2000/svg';
    var maxPointsRadi = 8;
    var clippath = document.createElementNS(_svgNS, 'clipPath');
    clippath.setAttributeNS(null, 'id', 'pointClipPath');
    clippath.setAttributeNS(null, 'clipPathUnits','objectBoundingBox');
    paper.canvas.getElementsByTagName('defs')[0].appendChild(clippath);
        
    var rect = document.createElementNS(_svgNS, 'rect');
    rect.setAttributeNS(null, 'x', (0 - maxPointsRadi));
    rect.setAttributeNS(null, 'y', (0 - maxPointsRadi));
    rect.setAttributeNS(null, 'width', 500);
    rect.setAttributeNS(null, 'height', 260);
    clippath.appendChild(rect);
    circle.node.setAttribute("clip-path", 'url(#pointClipPath)');

// 2. Viola <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

set.push(rect, circle)         // populate the Set
   .draggable({margin: 10});   // Yes, that's it. Parameter is optional




// 3. Optional. You can stack more drag() event handlers of your own

var $debug = $('div#DEBUG'),
    move = function(dx, dy, mx, my, ev) {
        // Get mouse X/Y (relative to SVG/VML canvas)
        var offset = $(this.paper.canvas).parent().offset(),
            px = mx - offset.left,
            py = my - offset.top;

        $debug.html([
            'Drag Move: (Canvas offset relative to HTML doc): ' + 
                [offset.left, offset.top].join(', '),
            'Distance XY: ' + [dx, dy].join(', '),
            'Document XY: ' + [mx, my].join(', '),
            'Canvas XY: ' + [px, py].join(', ')
            ].join('<br>'));

    },
    start = function() { $debug.html('Drag Start'); },
    end = function() { $debug.html('Drag End'); };

set.drag(move, start, end);

当我使用“clip-path”和“drop-shadow”过滤器拖动圆形元素时，在最新的 chrome 和 edge 浏览器中的拖动路径中发现画布背景出现重影效果。它在 Firefox 中运行良好。期待平滑的拖动，而不会在 chrome 和边缘中产生任何额外的效果。