我遇到了一个非常奇怪的问题,该问题仅发生在Windows 10上的Internet Explorer 11中。当jQuery sortable停止时,list元素内的SVG图标变为不可见。在Chrome和Edge中可以正常工作,这似乎不是样式问题。我设法创建了一个简单的 fiddle ,以尽可能显示基本的问题。
http://jsfiddle.net/UAcC7/1666/
<svg>
<use xlink:href="#icon-add" />
</svg>
$("#sortable").sortable();
最佳答案
要解决此错误,您需要在每次将svg use标签添加到页面时手动更新它的xlink:href值。在using jquery to change the xlink:href attribute of svg elements上查看此其他文章,以获取有关其工作原理的更多信息。
更新属性的最好方法是使用jquery可排序stop方法。这是一个可行的jsFiddle: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
}
}
});