SVG 图标在 Windows 10 IE 11 中消失，使用 jQuery 可排序

Question

我遇到了一个非常奇怪的问题，该问题仅在 Windows 10 上的 Internet Explorer 11 中出现。当 jQuery sortable 停止时，列表元素内的 SVG 图标变得不可见。在 Chrome 和 Edge 中运行良好，似乎不是样式问题。我设法创建了这个简单的 fiddle 来尽可能地显示问题。

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

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

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

Answer 1

要修复此错误，您需要在每次添加到页面时手动更新 svg use 标签的 xlink:href 值。查看上的其他 post 以了解有关其工作原理的更多信息。

更新属性的最佳方法是使用jquery 可排序停止方法。这是一个有效的 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
    }
  }
});

SVG 图标在 Windows 10 IE 11 中消失，使用 jQuery 可排序

SVG icons disappears in Windows 10 IE 11 using jQuery Sortable

jquery

svg

jquery-ui-sortable

internet-explorer-11

windows-10