EdgeとFirefox（D3.js、Angular2）にSVGマーカーが表示されない

Question

D3.jsを使用していて、Edge/Firefoxに表示されていないマーカーに関する問題が発生しています。

次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の両方でMarker-endが表示されません。 IEは、すべてが大文字でない限り（XML5619：ドキュメント構文が正しくない）、Marker-end属性を超えてコンソールにエラーをスローします。 CSSで指定されたマーカーの終点を持つパス上のクラスを試しました - 同じエラーと同じ結果で。

FirefoxはXMLエラーをスローしていませんが、マーカー終了を表示していません。 Chromeにのみ表示されます。

Answer 1

問題を解決しました。 Angular2はURLの検索機能（#Arrow）を無効にするページ上で

を使用します。

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)" }) 
    }) 
    } 

ここ

詳細情報：： Using base tag on a page that contains SVG marker elements fails to render marker

ソリューションはd3.jsと事前保留にLOCATION.HREFをマーカー属性を追加することです