使用jQuery Sortable在Windows 10 IE 11中SVG图标消失

Question

我遇到了一个非常奇怪的问题,只发生在Windows 10上的Internet Explorer 11中.当jQuery sortable停止时,list元素中的SVG图标变得不可见.在Chrome和Edge中运行良好,它似乎不是样式问题.我设法创造了这个简单的小提琴,以尽可能地展示问题.

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

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

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

Answer 1

要修复此错误,您需要在每次将svg use标记添加到页面时手动更新它的xlink:href值.查看关于使用jquery更改svg元素的xlink:href属性的其他帖子,了解有关其工作原理的更多信息.

更新属性的最佳方法是使用jquery sortable 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
    }
  }
});