Warum entfernt Chrome bei Verwendung von jQuery Draggable ein Bildmuster auf einem SVG?

Ich wickle ein SVG in ein ziehbares div. Das SVG erfordert eine Form oder einen Pfad mit einer Bildfüllung auf dem Gesicht. Alles ist in Ordnung und funktioniert zu 100% in Firefox. In Chrome lässt es sich einmal ziehen und alles ist in Ordnung, aber bei nachfolgenden Ziehen-Operationen verschwindet das Bild beim Ablegen. Das Seltsame ist, dass das Bild bei nachfolgenden Drag-Operationen im Helfer- und Original-Div wieder erscheint, aber immer beim Drop verschwindet.Warum entfernt Chrome bei Verwendung von jQuery Draggable ein Bildmuster auf einem SVG?

In IE können Sie einmal ziehen und dann an der richtigen Stelle einfrieren.

Hier ist der 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>

Die CSS:

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

Die 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); 
    } 
});

Die Geige: https://jsfiddle.net/osmybu81/8/

Quelle

2015-05-12 Dradge

'width = "16000" height = "8000"' - 128 Megapixel wirklich notwendig? Warum nicht versuchen, dieses Ding ein bisschen kleiner zu machen? –

Ich habe gerade eine Lösung gefunden, um das in Chrome zu machen, aber es ist verrückt. Es beinhaltet das Kopieren des Inhalts des ziehbaren Div im Start-Event und das anschließende Kopieren über den Inhalt des Stop-Events. Grundsätzlich schreiben die Inhalte über den gleichen Inhalt. Verrückt, aber es behebt das Problem: https://jsfiddle.net/Dradge/osmybu81/11/ Noch keine Ahnung, warum es in IE einfriert. – Dradge

@squeamish - die von Ihnen erwähnte Breite und Höhe sind keine Pixel. Sie sind die Koordinaten meines SVG-Systems. Die Höhe und Breite wird durch das enthaltende div gesteuert. Sehen Sie sich eine Erklärung hier an: http://sarasoueidan.com/blog/svg-coordinate-systems/ – Dradge

Sie benötigenverwenden? Denn wenn Sie das entfernen, scheint es gut zu funktionieren.

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

Quelle

2015-05-12 18:21:59

Leider ja Paul. Der Kunde hat einen Klon angefordert, der herumgeschleift werden soll. Guter Punkt aber und kein Klon scheint zu verhindern, dass es in IE blockiert. Ich habe eine Lösung gefunden, die zu 100% mit einem Klon in Chrome und FF funktioniert, aber das Sperren im IE ist jetzt das einzige Problem. – Dradge

Warum entfernt Chrome bei Verwendung von jQuery Draggable ein Bildmuster auf einem SVG?

Antwort

Verwandte Themen