当使用jQuery拖动时，为什么Chrome在SVG上删除了图像模式

Question

我正在将SVG包装在可拖动的div中。SVG需要一条形状或路径，图像填充在脸上。一切都很好，并在Firefox中100％起作用。在Chrome中，它可以让您拖动一次，一切都很好，但是在随后的拖放操作中，图像在下降时消失。奇怪的是，随后的拖放操作中的图像重新出现在助手和原始Div中，但在下降时总是消失。

在IE中，它可以让您拖动一次，然后将其冻结到位。

这是HTML：

<div class="svgcontainer draggable" style="width:300px; height:220px">
    <svg transform="translate(0,0)" viewBox="0 0 8000 8000">
         <defs>
            <rect id="rectangle" width="8000" height="5860" />
            <pattern id="texture" patternUnits="userSpaceOnUse" x="0" y="0" width="8000" height="8000">
                <image xlink:href="http://texturezine.com/wp-content/uploads/2009/10/Spray-Wall-Texture-01.jpg" x="0" y="0" width="16000" height="8000" transform="translate(-4000,0)" />
            </pattern>
        </defs>
        <use xlink:href="#rectangle" fill="url(#texture)" />
    </svg>
</div>

CSS：

.svgcontainer {position:absolute;border:2px solid red;}

JavaScript：

$(".draggable").draggable({
    helper: 'clone',
    cursor: 'move',
    opacity: 0.7,
    stop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        $(this).css('top', top);
        $(this).css('left', left);
    }
});

小提琴：https：//jsfiddle.net/osmybu81/8/

Answer 1

您需要使用helper: clone吗？因为如果删除它，它似乎可以正常工作。

https://jsfiddle.net/osmybu81/13/