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

这里有一个问题出现的地方：http://jsfiddle.net/EEYZZ/

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

我的解决方法是手动从DOM中删除节点并重新添加，这将根据需要更新节点……不要谈论性能之类的东西，但我认为目前没有更好的方法来做到这一点。(http://jsfiddle.net/kaljak/5zTv9/3/)

Answer 2

IE中的一个问题似乎是marker继承了stroke、stroke-width和fill属性(与标准相反)。

但是，可以通过显式设置笔划属性来解决此问题。

考虑以下问题：

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

通过设置标记stroke="none"和fill="black"，渲染效果看起来很好：

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

注意:我只在IE11中测试过这个。我的猜测是，它至少在IE10中也能正常工作。任何关于这个非常受欢迎的信息。

Answer 3

我也面临着同样的问题，这让我很头疼--我真的不明白为什么微软不解决这个问题。我决定用自定义路径替换标记，这有一个很好的副作用，比如你可以在运行时使用JavaScript更改填充或颜色。

我使用d3创建我的svg，边有类' edge -path‘，提示有类'edge- tip’。这两条路径都是svg的子路径:g。边本身是一条样条曲线，所以为了旋转尖端，我取最后10个像素的斜率。这几乎是用于更新箭头的代码，适用于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)';
    });

也许它对某些人有帮助:)