Tại sao Chrome xóa mẫu hình ảnh trên SVG khi sử dụng jQuery Draggable?

Question

Tôi đang bao gồm một SVG bên trong một div kéo được. SVG yêu cầu một hình dạng hoặc đường dẫn với một hình ảnh điền vào khuôn mặt. Mọi thứ đều hoạt động tốt và hoạt động 100% trong Firefox. Trong Chrome, nó cho phép bạn kéo một lần và mọi thứ đều ổn nhưng trên các thao tác kéo tiếp theo, hình ảnh biến mất khi thả. Điều kỳ lạ là hình ảnh xuất hiện lại trong helper và div gốc trên các thao tác kéo tiếp theo nhưng luôn luôn biến mất khi thả.

Trong IE, nó cho phép bạn kéo một lần và sau đó nó đóng băng tại chỗ.

Đây là 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;} 

Các 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); 
    } 
}); 

Các fiddle: https://jsfiddle.net/osmybu81/8/

Answer 1

Bạn cần phải sử dụng helper: clone? Bởi vì nếu bạn loại bỏ nó, nó có vẻ hoạt động tốt.

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