Currently, I am trying to encapsulate an SVG within a draggable div. The SVG contains a shape or path with an image fill on the face. Surprisingly, it displays perfectly and functions flawlessly in Firefox. However, when it comes to Chrome, the dragging operation works fine for the first time, but on subsequent drags, the image disappears upon dropping. The strange part is that the image reappears in both the helper and the original div during subsequent drag operations, only to vanish again on drop.
As for Internet Explorer, dragging once causes it to freeze in place.
Below is the HTML code snippet:
<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>
Here is the CSS provided:
.svgcontainer {position:absolute;border:2px solid red;}
And lastly, the JavaScript code:
$(".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);
}
});
For a live demonstration, you can visit the following fiddle: https://jsfiddle.net/osmybu81/8/