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

【问题标题】：Why does Chrome remove an image pattern on an SVG when using jQuery Draggable?为什么 Chrome 在使用 jQuery Draggable 时会删除 SVG 上的图像模式？
【发布时间】：2015-07-23 10:59:47
【问题描述】：

我将一个 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/

【问题讨论】：

width="16000" height="8000" — 真的需要 128 兆像素吗？为什么不试着把这个东西弄小一点呢？
我刚刚想出了一个修复方法来让它在 Chrome 中工作，但这太疯狂了。它涉及在开始事件上复制可拖动 div 的内容，然后在停止事件上复制这些内容。基本上将内容写在相同的内容上。疯狂但它解决了问题：jsfiddle.net/Dradge/osmybu81/11 仍然不知道为什么它在 IE 中冻结。
@squeamish - 你提到的宽度和高度不是像素。它们是我的 SVG 系统的坐标。高度和宽度由包含的 div 控制。在这里查看解释：sarasoueidan.com/blog/svg-coordinate-systems

标签： javascript jquery html css svg

【解决方案1】：

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

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

【讨论】：

不幸的是，保罗。客户要求拖动克隆。好地方虽然没有克隆似乎阻止它锁定在 IE 中。我确实找到了一个可以 100% 使用 Chrome 和 FF 克隆的解决方案，但现在唯一的问题是 IE 中的锁定。