Le icone SVG scompaiono in Windows 10 IE 11 utilizzando jQuery Sortable

Sto riscontrando un problema davvero strano che si verifica solo in Internet Explorer 11 su Windows 10. Quando jQuery ordinabile interrompe l'icona SVG all'interno dell'elemento della lista diventa invisibile. Funziona bene in Chrome e Edge e non sembra essere un problema di stile. Sono riuscito a creare questo semplice violino per mostrare il problema nel modo più semplice possibile.Le icone SVG scompaiono in Windows 10 IE 11 utilizzando jQuery Sortable

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

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

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

fonte

2015-10-09 peeh

Ho contattato il supporto di Microsoft ed ha ottenuto la seguente risposta: ho fatto un po 'scavare intorno, e ha scoperto che in effetti Internet Explorer non supporta il caricamento da un' fonte esterna. Sembra che sia visualizzato correttamente inizialmente, in quanto abbiamo una certa compatibilità parziale, ma si interrompe quando si tenta di eseguire l'operazione di spostamento (poiché non è garantita la piena compatibilità). – peeh

Hanno fornito i seguenti collegamenti: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use -> la tabella in basso conferma no supporto IE https://github.com/ jonathantneal/svg4everybody -> libreria che consente a tutti i browser di vedere SVG uniformemente https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263916-svg-external-content?tracking_code=85a4cffafffac0497bb5074ed03d43f5 -> il problema segnalato è per Edge, ma si applica anche a IE. Come puoi vedere dal primo commento (dipendente MSFT) è incluso in Insider Build 10547. – peeh

Per risolvere questo bug è necessario aggiornare manualmente il xlink: il valore href del tag svg uso ogni volta che viene aggiunto alla pagina. Dai un'occhiata a questo altro post su using jquery to change the xlink:href attribute of svg elements per maggiori informazioni sul perché questo funziona.

Il modo migliore per aggiornare l'attributo è utilizzare il metodo di interruzione ordinabile jquery. Ecco un jsFiddle che funziona: 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 
 
    } 
 
    } 
 
});

fonte

2016-09-26 18:09:37

Funziona alla grande in IE! – swiss196

Le icone SVG scompaiono in Windows 10 IE 11 utilizzando jQuery Sortable

risposta

Problemi correlati