10

Ich habe ein wirklich seltsames Problem, das nur in Internet Explorer 11 unter Windows 10 auftritt. Wenn jQuery sortierbar stoppt, wird das SVG-Symbol im Listenelement unsichtbar. Funktioniert gut in Chrome und Edge und es scheint kein Styling-Problem zu sein. Ich habe es geschafft, diese einfache Geige zu erstellen, um das Problem so einfach wie möglich zu zeigen.SVG-Symbole verschwinden in Windows 10 IE 11 mit jQuery Sortable

http://jsfiddle.net/UAcC7/1666/

<svg> 
    <use xlink:href="#icon-add" /> 
</svg> 

$("#sortable").sortable(); 
+0

ich Microsoft Support kontaktiert und bekam folgende Antwort: ich um einige Graben hat, und festgestellt, dass in der Tat Internet Explorer nicht Laden von einem nicht unterstützt " externe Quelle. Es sieht so aus, als ob es anfangs korrekt angezeigt wird, da wir teilweise kompatibel sind, aber beim Versuch, den Verschiebevorgang durchzuführen (da volle Kompatibilität nicht garantiert ist), bricht es ab. – peeh

+0

Sie haben die folgenden Links zur Verfügung gestellt: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use -> Tabelle im unteren Bereich bestätigt keine IE-Unterstützung https://github.com/ jonathantneal/svg4everybody -> Bibliothek, mit der alle Browser SVG einheitlich sehen können https://wpdev.uservoice.com/forums/257854-microsoft-edge-de-veloper/suggestions/6263916-svg-external-content?tracking_code=85a4cffafffac0497bb5074ed03d43f5 -> Das gemeldete Problem betrifft Edge, es gilt jedoch auch für IE. Wie Sie aus dem ersten Kommentar (MSFT Mitarbeiter) sehen können, ist es in Insider Build 10547 enthalten. – peeh

Antwort

5

diese Fehler beheben Sie manuell die xlink aktualisieren müssen: jedes Mal href Wert des svg Verwendung Tages es zu der Seite hinzugefügt wird. Weitere Informationen dazu, warum das funktioniert, finden Sie in diesem anderen Beitrag unter using jquery to change the xlink:href attribute of svg elements.

Die beste Methode zum Aktualisieren des Attributs ist die Verwendung der jQuery-Methode zum Sortieren von Stopps. Hier ist ein jsFiddle, das funktioniert: http://jsfiddle.net/t25hyyso/4/

$("#sortable").sortable({ 
 
    stop: function(event, data) { 
 
    useElement = data.item[0].getElementsByTagName("use")[0]; 
 
    if (useElement.href && useElement.href.baseVal) { 
 
     useElement.href.baseVal = useElement.href.baseVal; // trigger fixing of href 
 
    } 
 
    } 
 
});

+0

Funktioniert gut in IE! – swiss196