svg marker does not work in IE9-10

问题:

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

<defs>
    <marker id="start" refX="1" refY="5" markerUnits="userSpaceOnUse" markerWidth="17" markerHeight="11" orient="auto">
        <path id="conditional"   d="M 0 6 L 8 1 L 15 5 L 8 9 L 1 5" fill="white" stroke="black" stroke-width="1" />
        <path id="default" d="M 5 0 L 11 10" fill="white" stroke="black" stroke-width="1" />
    </marker>
    <marker id="end" refX="15" refY="6" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="12" orient="auto">
        <path id="arrowhead" d="M 0 1 L 15 6 L 0 11z" fill="black" stroke="black" stroke-linejoin="round" stroke-width="2" />
    </marker>
</defs>
<g id="edge">
    <path id="bg_frame" d="M10 50 L210 50" stroke="black" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" marker-start="url(#start)" marker-end="url(#end)" />
    <text id="text_name" x="0" y="0" oryx:edgePosition="startTop"/>
</g>

But it does not show arrow at the end of path in IE 9 or IE 10

Does 'triangle' not supported in IE or Problem in the code?

An example here, http://www.w3.org/TR/SVG11/images/painting/marker.svg too does not work in IE.

Help Please, it is the only point my workflow editor has stuck.

Link result

My code's result in FF is:

And code result in IE is(there is no arrow, no square at the end of arrow):

回答1:

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

回答2:

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

回答3:

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

回答4:

One problem in IE seems to be that marker inherits the stroke, stroke-width and fill properties (contrary to the standards).

However, this can be worked around by setting the stroke properties explicitly.

Consider the problem with

http://www.w3.org/TR/SVG11/images/painting/marker.svg

By setting the marker stroke="none" and fill="black" the rendering seems fine:

https://codepen.io/anon/pen/qmYzGE

Note: I have tested this only in IE11. My guess is that it will work at least in IE10 as well. Any information on this very welcome.

回答5:

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".

回答6:

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>

回答7:

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.