Ikony SVG znikają w systemie Windows 10 IE 11 przy użyciu jQuery Sortable

Występuje naprawdę dziwny problem, który występuje tylko w programie Internet Explorer 11 w systemie Windows 10. Po zakończeniu sortowania jQuery ikona SVG w elemencie listy staje się niewidoczna. Działa dobrze w Chrome i Edge i nie wydaje się być problem z stylizacją. Udało mi się stworzyć to proste skrzypce, aby pokazać problem tak podstawowy, jak to tylko możliwe.Ikony SVG znikają w systemie Windows 10 IE 11 przy użyciu jQuery Sortable

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

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

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

Źródło

2015-10-09 peeh

skontaktowałem wsparcie Microsoft i otrzymał następującą odpowiedź: zrobiłem kilka kopanie wokół, i okazało się, że rzeczywiście Internet Explorer nie obsługuje ładowanie ze związku " źródło zewnętrzne. Wygląda na to, że początkowo wyświetla się poprawnie, ponieważ mamy częściową zgodność, ale zrywa się, gdy próbujemy wykonać operację przenoszenia (ponieważ pełna zgodność nie jest gwarantowana). – peeh

Udostępnili następujące linki: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use -> tabela na dole potwierdza brak wsparcia IE https://github.com/ jonathantneal/svg4everybody -> biblioteka, która pozwala wszystkim przeglądarkom na równoczesne wyświetlanie SVG https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263916-svg-external-content?tracking_code=85a4cffafffac0497bb5074ed03d43f5 -> zgłoszony problem dotyczy Edge, ale dotyczy także IE. Jak widać z pierwszego komentarza (pracownik MSFT) jest on zawarty w Insider Build 10547. – peeh

Aby naprawić ten błąd, należy ręcznie zaktualizować XLink: href wartość znacznika czasowego użytkowania SVG każdy jest ona dodawana do strony. Sprawdź ten inny wpis na stronie using jquery to change the xlink:href attribute of svg elements, aby uzyskać więcej informacji o tym, dlaczego to działa.

Najlepszym sposobem zaktualizowania atrybutu jest użycie junkera do sortowania. Oto jsFiddle że działa: 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 
 
    } 
 
    } 
 
});

Źródło

2016-09-26 18:09:37

Działa świetnie w IE! – swiss196

Ikony SVG znikają w systemie Windows 10 IE 11 przy użyciu jQuery Sortable

Odpowiedz

Powiązane problemy