internet-explorer - 移动和更改 SVG 文本会导致 Internet Explorer 11 忽略鼠标

Question

http://jsfiddle.net/zzbar210/3/

我正在使用 IE 11.0.9600.17280 对此进行测试。如果我在 SVG 区域上移动鼠标时更改文本框，Internet Explorer 将停止响应整个页面的鼠标事件(单击、移动)，但我仍然可以使用键盘(键入、切换)。我发现恢复鼠标控制的唯一方法是刷新页面。有时即使鼠标不移动也会发生。

这是什么原因造成的？有没有办法解决这个问题？

var pt;

$(document).ready(function(){

  pt = document.getElementById("layout_area").createSVGPoint();
  
  $("#layout_area").mousemove(function(event) {
    $("#position").html(event.clientX);
     
     // Convert x/y into SVG position
      pt.x = event.clientX;
      pt.y = event.clientY;
      var svg = $("#layout_area")[0]
      
      var matrix = pt.matrixTransform(svg.getScreenCTM().inverse());
      
      var pos_x = matrix.x
      var pos_y = matrix.y
      
      $("#position").append("<br />( " + pos_x.toFixed(3) + ", " + pos_y.toFixed(3) + " )");

      document.getElementById("text1_use").setAttribute("x",pos_x-200);
      document.getElementById("text1_use").setAttribute("y",pos_y-200);
  });
  
  $("#label_text").keyup(function() {
      document.getElementById("text1").textContent = $("#label_text").val().trim();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="label_text" />
<br />
<svg width="400" height="200" viewbox="0 0 400 200" xmlns:xlink="http://www.w3.org/1999/xlink" id="layout_area" style="overflow: hidden;">
  <defs>
    <svg id="Si19krjw36" viewBox="-200 -200 400 400" width="400" height="400">
      <text id="text1" style="font-family: Arial; font-size: 25pt; text-anchor: middle;" fill="#000000" x="0" y="0">text</text>
    </svg>
  </defs>
  <rect x="0" y="0" width="400" height="200" fill="white" stroke="black"/>
  <use id="text1_use" x="-103" y="-84.09" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Si19krjw36" />
</svg>
<br /><br />
<div id="position"></div>

Answer 1

我相信你可能会遇到 this bug .

我发现的解决方法是设置 pointer-events: none在所有 <use>元素。就我而言，我需要在 <use> 上处理鼠标事件。元素，所以我放置了 <rect>它们上面的元素并将我的鼠标处理程序附加到那里。

可悲的是，微软似乎永远不会解决这个问题......