Moving and modifying SVG text causes Internet Explorer 11 to ignore the mouse
http://jsfiddle.net/zzbar210/3/
I am testing this with IE 11.0.9600.17280. If I change the textbox when I move the mouse around the SVG area, Internet Explorer stops responding to mouse events (click, move) for the entire page, but I can still use the keyboard (text input, tab). The only way I have found mouse control is to refresh the page. Sometimes this happens even if the mouse is not moving.
What is causing this? Is there a way to get around the problem?
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>
source to share
I found a workaround that suits my needs. The problem seems to be because the cursor is right above the text when it changes, so I added an invisible div on top of the SVG and changed the mousemove event to that div. The cursor becomes a pointer type instead of an i-beam, and the page no longer freezes when the text box changes.
Here's a working example: http://jsfiddle.net/zzbar210/6/
var pt;
$(document).ready(function() {
pt = document.getElementById("layout_area").createSVGPoint();
$("#cover").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();
});
});
<input type="text" id="label_text" />
<br />
<div style="position: relative; height: 200px">
<svg width="400" height="200" viewbox="0 0 400 200" xmlns:xlink="http://www.w3.org/1999/xlink" id="layout_area" style="overflow: hidden; z-index: 0; position: absolute; left: 0; top: 0;">
<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>
<div id="cover" style="position: absolute; left: 0; top: 0; z-index: 1; background: rgba(0,0,0,0); height: 200px; width: 400px"></div>
</div>
<br />
<br />
<div id="position"></div>
source to share
I think I have the same problem and as far as I can get it this is a bug in IE11 under Windows 7. In my case I move the SVG element with a click to another group but the same thing happens - no mouse event for the whole page thereafter.
I've tried many workarounds, including delaying DOM changes with setTimeout, handling a higher level event in the DOM, removing a click handler before changing the DOM. All the same result.
I would really like to know with whom this can be achieved. I'll put you on if I find a job.
source to share
I believe you may encounter this error .
The workaround I found was to install pointer-events: none
for all items <use>
. In my case, I needed to handle mouse events on my elements <use>
, so instead, I placed the elements <rect>
above them and attached my mouse handlers.
Unfortunately, it doesn't look like Microsoft will ever fix this ...
source to share