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

第一次在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中不支持“三角形”还是代码中存在问题

这里的一个例子也不适用于IE

请帮忙，这是我的工作流编辑器唯一卡住的地方

链接结果

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

IE中的代码结果为（没有箭头，箭头末端没有正方形）：

---

这在IE10中对我来说似乎很好（左边是菱形，右边是三角形）

---

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

我在使用标记动态移动线时遇到问题。它们在pageload上显示良好，但在更改行x/y属性时不会移动

---

正如xdhmoore在回答中所说，问题已经报告给了微软：

出现问题的地方有一把小提琴：

---

我的解决方法是手动从DOM中删除节点并再次添加，这将根据需要更新节点。。。不要谈论性能和其他方面，但我认为目前没有更好的方法。（）

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

我使用d3创建svg，边缘具有类“边缘路径”，尖端具有类“边缘尖端”。这两条路径都是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)';
    });

edge.select（'path.edge-tip'））
//尖端的形状
.attr（'d'，'M0,0L10,5L0,10Z'）
//将尖端移动到边的末端并旋转。
.attr（'transform'，函数（d）{
var parent=d3.select（this）.node（）.parentNode，
path=d3.select（父）.select（'path.edge path'）.node（），
pathLength=path.getTotalLength（），
point1=path.getPointAtLength（Math.max（0，pathLength-10）），
point2=path.getPointAtLength（路径长度），
vect={x:point2.x-point1.x，y:point2.y-point1.y}
l1=vect.x*vect.x+vect.y*vect.y；
l1=数学sqrt（l1）；
变量角度=数学acos（向量x/l1）；
角度=360*（角度/（2*数学PI））；
if（向量y<0）{
角度=360度-角度；
}
返回“translate”（“+point1.x+”，“+（point1.y-5）+”）rotate（“+angle++”05）”；
});

---

也许这对某人有帮助：）

在元素周围放置另一个组，并在该组中定义MS Edge和其他标记

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

---

我无法让标记在IE11中工作，但在Edge中它们可以工作。诀窍是对于内联SVG，您需要为标记使用

xml:id

，而不仅仅是

id

编辑：事实上

任何东西：id

都有效。不知道为什么

编辑2：啊。这打破了Chrome中的SVG。您可以复制ID:

ID=“foo”edge\u sucks:ID=“foo”

---

编辑3：嗯，看来它毕竟在Edge中起作用了。不知道发生了什么。

IE中的一个问题似乎是

标记

继承了

笔划

、

笔划宽度

和

填充

属性（与标准相反）

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

考虑一下这个问题

通过设置标记

stroke=“none”

和

fill=“black”

渲染看起来很好：

---

注意：我只在IE11中测试过这个。我的猜测是，它至少在IE10中也会起作用。欢迎提供任何有关此的信息。

“这是链接示例还是我的代码？”？我附上什么，我在IE10链接结果得到的图像

makerUnits=userSpaceOnUse

受支持？

markerUnits=“userSpaceOnUse”

在IE中运行良好（以我的经验）。只有

“strokeWidth”

被破坏。正如我所说，你的主要示例在IE中对我很有用。你能发布一张你得到的图片吗？我需要看看你新示例的SVG代码。正如我所说，最初的示例（使用单行）在IE10中运行良好。+1用于解决方案。让我想到您可能可以在两个标记之间交换，而不是删除节点：。但是，似乎比您的解决方案更紧张。+1用于解决方案。但是您不需要删除SVG元素

parent.appendChild（child）

足以解决这个问题。这似乎对我很有效，应该选择（IMO）作为首选答案，因为这是一个很容易解决的问题。

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