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/

为什么Chrome在使用jQuery Draggable时会删除SVG上的图像模式？

1 个答案: