Javascriptで追加されたSVGのマーカーエンドを正しく整列させるにはどうすればよいですか？

私はHTMLドキュメントにSVGを書き、その文書を表示する場合、正しく整列SVGコード持っている：これは素晴らしい作品、およびこれをレンダリングするJavascriptで追加されたSVGのマーカーエンドを正しく整列させるにはどうすればよいですか？

<html> 
<head> 
    <script type="text/javascript" src="jquery-1.12.2.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
</head> 
<body> 

    <div id="stage"> 
    <svg width="100" height="100"> 
    <defs> 
    <marker id="arrow-1" markerWidth="4" markerHeight="3" markerUnits="strokeWidth" refx="1" refy="5" viewBox="0 0 10 10" orient="auto"> 
     <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"></path> 
    </marker> 
    </defs> 
    <path d="M 0,10 L 90,10" stroke-width="2" stroke="red" marker-end="url(#arrow-1)"></path> 
    </svg> 
    </div> 

</body> 
</html>

を：

ていることに注意してください作業出力で、マーカーエンドが適切にストローク

と整列している私は、JavaScriptを使用して、まったく同じSVG構造体を製造しよう：

var arrowID = 0; 
    function drawArrow() { 
    var ns = 'http://www.w3.org/2000/svg'; 
    var svg = document.createElementNS(ns, 'svg'); 
    svg.setAttribute("width",100); 
    svg.setAttribute("height",100); 

    var defs = document.createElementNS(ns, "defs"); 
    var marker = document.createElementNS(ns, "marker"); 
    var id = "arrow-" + arrowID++; 
    marker.setAttribute("id", id); 
    marker.setAttribute("markerWidth", 4); 
    marker.setAttribute("markerHeight", 3); 
    marker.setAttribute("markerUnits", "strokeWidth"); 
    marker.setAttribute("refx", 1); 
    marker.setAttribute("refy", 5); 
    marker.setAttribute("viewBox", "0 0 10 10"); 
    marker.setAttribute("orient", "auto"); 

    var path = document.createElementNS(ns, "path"); 
    path.setAttribute("d","M 0 0 L 10 5 L 0 10 z"); 
    path.setAttribute("fill","context-stroke"); 

    marker.appendChild(path); 
    defs.appendChild(marker); 
    svg.appendChild(defs); 

    var instance = document.createElementNS(ns, "path"); 
    // todo set actual start and end 
    instance.setAttribute("d", "M 0,10 L 90,10"); 
    instance.setAttribute("stroke-width", "2"); 
    instance.setAttribute("stroke", "red"); 
    instance.setAttribute("marker-end", "url(#"+id+")"); 

    svg.appendChild(instance); 

    document.getElementById("stage").appendChild(svg); 


    }

ページに終わるSVGは、（上記のあるものと同じ）正しいにもかかわらず：