I ran into the same problem and it caused me some headache - I really don't understand why Microsoft is not fixing it. I decided to replace the markers with custom paths that have a good side effect that you can, for example. change the fill or color at runtime using JavaScript.
I create my svg using d3, the edge has an edge-path class, and the tip has an edge-tip class. Both paths are svg: g child elements. The edge itself is a spline, so to rotate the tip, I take the slope of the last 10 pixels. This is pretty much the code that is used to update the arrow, works in IE9-11:
edge.select('path.edge-tip') // the shape of the tip .attr('d', 'M0,0L10,5L0,10Z') // move the tip to the end of the edge and rotate. .attr('transform', function(d) { var parent = d3.select(this).node().parentNode, path = d3.select(parent).select('path.edge-path').node(), pathLength = path.getTotalLength(), point1 = path.getPointAtLength(Math.max(0, pathLength - 10)), point2 = path.getPointAtLength(pathLength), vect = { x: point2.x - point1.x, y: point2.y - point1.y } l1 = vect.x * vect.x + vect.y * vect.y; l1 = Math.sqrt(l1); var angle = Math.acos(vect.x / l1); angle = 360 * (angle / (2*Math.PI)); if (vect.y < 0) { angle = 360 - angle; } return 'translate(' + point1.x + ',' + (point1.y - 5) + ') rotate (' + angle +' 0 5)'; });
Maybe this helps someone :)
frow
source share