IE 11 "Crashes" 使用动态 SVG 元素时

Question

我最近为我公司的新 html 应用程序实现了自定义 SVG 图标控件。实施后不久，我们的质量部门开始报告 IE 11 运行domly "crashes" 在使用该应用程序时。

我不确定崩溃一词是否准确描述了正在发生的事情。应用程序进入一种状态，其中元素将不再接受鼠标或键盘输入，显示也不会更改为显示悬停样式。但是，当您将鼠标悬停在按钮和输入元素上时，光标图像会发生适当的变化，并且可以使用鼠标滚轮（但只能使用鼠标滚轮）滚动可滚动部分。

当应用程序处于这种状态时，我运行 UI 响应性能分析器发现没有客户端脚本运行，只有 IE 的垃圾收集器。经过一周的测试，我最终确定当用户单击由 svg 元素生成的图标时会触发该状态，但仅当该单击触发一个函数，该函数从 DOM.[=15 中删除单击的 svg 元素时=]

这里有一个代码笔可以帮助explain/recreate解决这个问题： http://codepen.io/GooeyIdeas/pen/WvpPzP

以及娱乐的最低代码：

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    var self = this;
    this.isLocked = ko.observable(false);
    this.toggleLock = function(){
      self.isLocked(!self.isLocked.peek())
    }
}

ko.applyBindings(new AppViewModel());

svg use{
  cursor: crosshair;
}
svg{
  border: 1px solid #eeeeee;
  cursor: default;
}
svg:hover{
  border-color: #dedede;
  background: #cecece;
}
#svg-icons{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>The cursor will change into a crosshair if you are hovering over the correct element.</div>
<div>
  <!-- ko if: isLocked    -->
  <svg class="ux-icon-svg" width="24" height="24"><use data-bind="click: toggleLock" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#locked"></use></svg>
  <!-- /ko -->
  <!-- ko ifnot: isLocked -->
  <svg class="ux-icon-svg" width="24" height="24"><use data-bind="click: toggleLock" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#unlocked"></use></svg>
  <!--/ko-->
</div>

<svg xmlns="http://www.w3.org/2000/svg" id="svg-icons">
  <symbol viewBox="0 0 24 24" id="unlocked">
    <path d="M18,9h-1V7c0-2.8-2.2-5-5-5S7,4.2,7,7h1.9c0-1.7,1.4-3.1,3.1-3.1s3.1,1.4,3.1,3.1v2H6c-1.1,0-2,0.9-2,2v9c0,1.1,0.9,2,2,2
             h12c1.1,0,2-0.9,2-2v-9C20,9.9,19.1,9,18,9z"></path>
  </symbol>
  <symbol viewBox="0 0 24 24" id="locked">
    <path d="M18,9h-1V7c0-2.8-2.2-5-5-5S7,4.2,7,7v2H6c-1.1,0-2,0.9-2,2v9c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-9C20,9.9,19.1,9,18,9z
             M15.1,9H8.9V7c0-1.7,1.4-3.1,3.1-3.1s3.1,1.4,3.1,3.1V9z"></path>
  </symbol>
</svg>

有人遇到过这个吗？有谁知道仍然可以让我使用 SVG 'use' 元素的解决方法？我需要澄清什么吗？

*编辑似乎有些人无法重现此错误。我想知道是否还有其他人可以重现此错误，如果不能，请问您 windows 是哪个版本运行?

**编辑 Windows 8 台 PC 上似乎不存在此错误。为确保我在我的示例中添加了 CSS ，当您将鼠标悬停在 svg use 元素上时，这会将光标更改为十字准线，因为这是您必须单击以触发崩溃的元素。

Answer 1

因为这个 post 的流量不多，我想我会 post 一个解决方案：我添加了这条 CSS 规则：

svg use {
  pointer-events: none;
}

这并不理想，但它可以防止 IE 11 锁定，这就是我需要支持这个项目的全部内容。但是，我希望这个 post 可以帮助将来可能遇到此错误并且确实需要支持旧版 IE 的其他人。如果有人愿意花时间想出一个更强大的解决方案，我会接受它作为这个 post 的答案。

我还应该就此问题向 Microsoft 提交错误报告吗？

Answer 2

我运行加入了一个 <svg>，它是用 AngularJS 和 ng-if 从 DOM 中动态添加或删除的。公认的解决方案对我不起作用。确实有效的解决方案是使用 ng-show 而不是隐藏和显示 SVG 而不是在 DOM.

中添加和删除它

IE 11 "Crashes" 使用动态 SVG 元素时

IE 11 "Crashes" when Using Dynamic SVG Elements

html

javascript

svg

knockout.js

internet-explorer-11