我遇到了一个非常奇怪的问题,该问题仅发生在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
    }
  }
});

10-07 19:10
查看更多