svg marker does not work in IE9-10

Question

Working first time on svg. I have following svg definition for an \'arrow-like\' path

Answer 1

I was facing the same Problem and it was causing me quite some headache - I really can't understand why Microsoft doesn't fix that. I decided to replace the markers with custom paths which has the nice side-effect that you can e.g. change the fill or the color at runtime using JavaScript.

I create my svg using d3, the edge has class 'edge-path' and the tip has class 'edge-tip'. Both paths are children of an svg:g. The edge itself is a spline, so for rotating the tip I take the slope of the last 10 pixels. This is pretty much the code which 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 it helps someone :)