svg标记在IE9-10中不起作用

Question

第一次在svg上工作.我有一个'箭头般的'路径的svg定义

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

但它不会在IE 9或IE 10中的路径末尾显示箭头

IE中不支持"三角形"或代码中有问题吗？

这里的一个例子,http://www.w3.org/TR/SVG11/images/painting/marker.svg也不适用于IE.

请帮助,这是我的工作流编辑器卡住的唯一一点.

链接结果

我的代码在FF中的结果是:

IE中的代码结果是(没有箭头,箭头末端没有方块):

Answer 1

xdhmoore在他的回答中写道,问题已经报告给了微软:https://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does- 不更新

问题显示有一个小提琴:http: //jsfiddle.net/EEYZZ/

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

我的解决方法是manuelly从DOM中删除节点并再次添加它,这将根据需要更新节点...不要谈论性能和内容,但我认为目前没有更好的方法来做到这一点.(http://jsfiddle.net/kaljak/5zTv9/3/)

Answer 2

对我来说，这在 IE10 中渲染得很好（左边是菱形，右边是三角形）。

然而，IE 中的标记存在一些已知问题。例如，IE不支持markerUnits=“StrokeWidth”。