Is it possible to insert a line with arrowhead by DOM manipulation?

[email protected] Thu, 25 Dec 2008 00:23:05 -0800 (PST)
Newsgroups	gmane.comp.mozilla.devel.svg
Organization	http://groups.google.com
Message-ID	<46ea75d7-cea7-4585-9843-1e76fd56a11c@z27g2000prd.googlegroups.com>
i tried to create some svg graphics in a html. i can create a
rectangle, also a line, but not a line with arrowhead.
it seems the creation of markers failed. can you somebody help me out?
the codes follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
        <title>Untitled Document</title>
        <script>
        	var svgRoot = null;
			var svgNamespace = 'http://www.w3.org/2000/svg';
			//var container = ;
            function $(id){
                return document.getElementById(id);
            }

            function getSvgRoot(){
                if (svgRoot == null) {
                    svgRoot = $
("container").ownerDocument.createElementNS(svgNamespace, "svg");
                    svgRoot.setAttributeNS(null, 'version', '1.1');
                    svgRoot.setAttributeNS(null, 'baseProfile',
'full');
                    $("container").appendChild(svgRoot);

                }
                return svgRoot;
            }
            function createRect(){

                var svgRoot = getSvgRoot();
                var svg;

                svg = $("container").ownerDocument.createElementNS
(svgNamespace, 'rect');
                svg.setAttributeNS(null, 'x', 5 + 'px');
                svg.setAttributeNS(null, 'y', 5 + 'px');
                svg.setAttributeNS(null, 'width', 55 + 'px');
                svg.setAttributeNS(null, 'height', 55 + 'px');
                svg.style.position = 'absolute';
                svg.setAttributeNS(null, 'stroke', "red");
                svg.setAttributeNS(null, 'stroke-width', "5px");
                svg.ondblclick = function(){
                    alert("you click me!");
                }

                svgRoot.appendChild(svg);
            }
			function createArrowLine(){

                var root = getSvgRoot();
                var svg;

				defEndArrow();

                svg = $("container").ownerDocument.createElementNS
(svgNamespace, 'line');
                svg.setAttributeNS(null, 'x1', '5');
                svg.setAttributeNS(null, 'y1', '5');
                svg.setAttributeNS(null, 'x2', '100');
                svg.setAttributeNS(null, 'y2', '100');
                //svg.style.position = 'absolute';
                svg.setAttributeNS(null, 'stroke', "red");
                svg.setAttributeNS(null, 'stroke-width', "3px");
				svg.setAttributeNS(null, 'marker-end', 'url(#endArrow)');
                svg.ondblclick = function(){
                    alert("you click me!");
                }
                root.appendChild(svg);
            }
			function defEndArrow(){

                var svgRoot = getSvgRoot();
                var defs;
                var marker;
				var path;

                defs = $("container").ownerDocument.createElementNS
(svgNamespace, 'defs');
                svgRoot.appendChild(defs);

				marker = $("container").ownerDocument.createElementNS
(svgNamespace, 'marker');
				marker.setAttributeNS(null, 'id', "endArrow");
				marker.setAttributeNS(null, 'viewBox', "0 0 1000 1000");
				marker.setAttributeNS(null, 'refX', "1");
				marker.setAttributeNS(null, 'refY', "5");
				marker.setAttributeNS(null, 'markerUnits', "strokeWidth");
				marker.setAttributeNS(null, 'orient', "auto");
				marker.setAttributeNS(null, 'markerWidth', "5");
				marker.setAttributeNS(null, 'markerHeight', "4");
				defs.appendChild(marker);

				path = document.createElementNS(svgNamespace, 'path');
				path.setAttributeNS(null, 'd', 'M 0 0 L 10 5 L 0 10 z');
				marker.appendChild(path);

            }

        </script>
    </head>
    <body>
        <div id="container">
        </div>

        <button onclick="createRect()">
            createRect
        </button>
		<button onclick = "createArrowLine()">createArrowLine</button>
    </body>
</html>