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 couldn't get markers to work in IE11, but in Edge they work. The trick is for inline SVGs you need to use xml:id for the markers instead of just id.

Edit: in fact anything:id works. Not sure why.

Edit 2: Ugh. That breaks the SVG in Chrome. You can duplicate the ID: id="foo" edge_sucks:id="foo".

Edit 3: Hmm scratch that it seems to work in Edge after all. No idea what is going on.

Answer 2

This appeared to render fine in IE10 for me (diamond shape on the left and triangle on the right).

However there are some known issues with markers in IE. For instance, IE doesn't support markerUnits="strokeWidth".

Answer 3

Laying another group around the element and defining within this group the markers works in MS Edge and others.

     <g id="maszlinie" style="marker-start: url(#pf2); marker-end: url(#pf)">
     <g id="bline" transform="translate(0,-20)">
        <line class="masz" y2="365" y1="365" x2="415" x1="15">
     </g>
     </g>

Answer 4

The problem is already reported to Microsoft as xdhmoore wrote in his answer: https://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update

There is a fiddle where the problem is shown: http://jsfiddle.net/EEYZZ/

   //if (isIE10 || isIE11) {
       var parent = p1.parentNode;
       parent.removeChild(p1);
       parent.appendChild(p1);
   //}

My workaround is to manuelly remove the node from DOM and add it again, this will update the node as wanted... Don't speak about performance and stuff, but I think currently there is no better way to do it. (http://jsfiddle.net/kaljak/5zTv9/3/)

Answer 5

I have had issues moving lines dynamically with markers. They show up fine on pageload, but don't move when the lines x/y attributes are changed.

http://social.msdn.microsoft.com/Forums/ie/en-US/f772aab3-5ce3-4367-8eec-4fe58ad94b14/urgent-serious-bug-svg-marker-is-not-updating-when-changing-the-lines-xy-in-ie10?forum=iewebdevelopment

http://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update

Answer 6

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 :)