Raphael JS 动态路径更新在 IE 11 中不起作用
Raphael JS Dynamic path update not working in IE 11
当我尝试在 IE 11 中让路径跟随鼠标指针时,它不会工作,但在 Chrome 中工作正常。
请看这里的代码http://jsfiddle.net/3xy3oba2/1/
<body>
<div id="container" onmousemove="move(event)"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script>
var paper = Raphael("container", 500, 500);
console.log("Path redraw test");
var arrow = paper.path("M 250, 250, L 0, 0");
arrow.attr('stroke-width', 2);
arrow.attr('stroke', "#0000FF");
arrow.attr('arrow-end', "classic-wide-long");
function move(event)
{
var x = event.layerX;
var y = event.layerY;
var path = "M 250, 250, L " + x + ", " + y;
arrow.attr('path', path);
}
</script>
</body>
有人知道出了什么问题吗?
上面提到的解决方法就是这个。删除箭头,更改路径,将箭头添加回去。
在此处更新代码:http://jsfiddle.net/7fz5qb7e/2/
这里也找到了同样的解决方法,https://groups.google.com/forum/#!topic/raphaeljs/m-H63bb7Nsw
这里是完整的 JS 代码:
<body>
<div id="container" onmousemove="move(event)"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script>
var paper = Raphael("container", 500, 500);
console.log("Path redraw test");
var arrow = paper.path("M 250, 250, L 0, 0");
arrow.attr('stroke-width', 2);
arrow.attr('stroke', "#0000FF");
arrow.attr('arrow-end', "classic-wide-long");
function move(event)
{
var x = event.offsetX;
var y = event.offsetY;
var path = "M 250, 250, L " + x + ", " + y;
arrow.attr('arrow-end', "");
arrow.attr("path", path);
arrow.attr('arrow-end', "classic-wide-long");
}
</script>
</body>
当我尝试在 IE 11 中让路径跟随鼠标指针时,它不会工作,但在 Chrome 中工作正常。
请看这里的代码http://jsfiddle.net/3xy3oba2/1/
<body>
<div id="container" onmousemove="move(event)"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script>
var paper = Raphael("container", 500, 500);
console.log("Path redraw test");
var arrow = paper.path("M 250, 250, L 0, 0");
arrow.attr('stroke-width', 2);
arrow.attr('stroke', "#0000FF");
arrow.attr('arrow-end', "classic-wide-long");
function move(event)
{
var x = event.layerX;
var y = event.layerY;
var path = "M 250, 250, L " + x + ", " + y;
arrow.attr('path', path);
}
</script>
</body>
有人知道出了什么问题吗?
上面提到的解决方法就是这个。删除箭头,更改路径,将箭头添加回去。
在此处更新代码:http://jsfiddle.net/7fz5qb7e/2/
这里也找到了同样的解决方法,https://groups.google.com/forum/#!topic/raphaeljs/m-H63bb7Nsw
这里是完整的 JS 代码:
<body>
<div id="container" onmousemove="move(event)"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script>
var paper = Raphael("container", 500, 500);
console.log("Path redraw test");
var arrow = paper.path("M 250, 250, L 0, 0");
arrow.attr('stroke-width', 2);
arrow.attr('stroke', "#0000FF");
arrow.attr('arrow-end', "classic-wide-long");
function move(event)
{
var x = event.offsetX;
var y = event.offsetY;
var path = "M 250, 250, L " + x + ", " + y;
arrow.attr('arrow-end', "");
arrow.attr("path", path);
arrow.attr('arrow-end', "classic-wide-long");
}
</script>
</body>