未在Edge和Firefox中显示SVG标记（D3.js，Angular2）

我正在研究使用D3.js的应用程序，并且在Edge/Firefox中没有出现标记问题。未在Edge和Firefox中显示SVG标记（D3.js，Angular2）

以下SVG嵌入到页面：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="100%" height="100%"> 
    <defs> 
    <marker id="Arrow" viewBox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="10" orient="auto"> 
     <path d="M 0 0 L 20 10 L 0 20" /> 
    </marker> 
    </defs> 
    <path stroke-dasharray="10, 10" d="M 500 500 L 75 75" MARKER-END="url(#Arrow)"/> 
</svg>

其中，如果我过去到一个HTML文件，按预期工作。但赢得Angular2项目IE和Firefox都不会显示标记结束。 IE通过Marker-end属性在控制台中引发错误，除非它是全部大写的（XML5619：不正确的文档语法。）。我试过在CSS中指定marker-end的路径上的一个类，它具有相同的错误和相同的结果。

Firefox不会抛出XML错误，但它不会显示标记结束;它只出现在Chrome中。

来源

2017-03-01 Patrick Dench

问题已解决。 Angular2使用

<base href="/">

在页面上，这会导致路径找到url（#Arrow）的能力。

的解决方案是添加该标记属性在d3.js和预挂起放在location.href：

renderArrows() { 
    var arrows = d3.selectAll('path.arrow'); 

    arrows.each(function (d) { 
     var path = d3.select(this); 
     path 
     .attr('stroke-linecap', 'round') 
     .attr('marker-end', function(d,i){ return "url(" + location.href + "#Arrow)" }) 
    }) 
    }

来源

2017-03-01 15:42:51

未在Edge和Firefox中显示SVG标记（D3.js，Angular2）

回答

相关问题