Dynamically create g in svg

Question

JSP Page

</object>

</body>
<script type="text/javascript">
                var far=document.getElementById("oo")
                far.addEventListener("load", function (){
                var svgDoc=far.contentDocument;
                var svgRoot=svgDoc.documentElement;
                document.getElementById("bar").onclick=function(){

                var g = svgDoc.createElementNS("http://www.w3.org/2000/svg", "g");
                g.setAttribute('id', 'group');
                g.setAttribute('shape-rendering', 'inherit');
                g.setAttribute('pointer-events', 'all');


                var use = svgDoc.createElementNS("http://www.w3.org/2000/svg", "use")
                use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#g1")
                use.setAttributeNS(null,"id", "u")
                svgRoot.appendChild(use)

                var create_bar=svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect")
                create_bar.setAttribute("id", "r_bar")
                create_bar.setAttribute("fill", "cream")
                create_bar.setAttribute("x", "300px")
                create_bar.setAttribute("y", "50px")
                create_bar.setAttribute("width", "100px")
                create_bar.setAttribute("height", "30px")
                create_bar.setAttribute("pointer-events", "inherit")
                g.appendChild(create_bar)

                var cir = svgDoc.createElementNS("http://www.w3.org/2000/svg", "circle");
                cir.setAttribute( "id","cir")
                cir.setAttribute( "cx","320px")
                cir.setAttribute( "cy","65px")
                cir.setAttribute( "r","10px")
                cir.setAttribute('fill', 'red')
                cir.setAttribute('pointer-events', 'inherit')
                g.appendChild(cir)

                svgRoot.appendChild(g)
            }
                var btn_id=document.getElementById('bar2')
                btn_id.onclick=function()
                {
                    var a=svgDoc.getElementById('r_bar')
                    var b=svgDoc.getElementById('group')
                    var c=svgDoc.getElementById('cir')
                    var d=svgDoc.getElementById('u')

                    alert(a.id+".."+b.id+".."+c.id+".."+d.id)
                }

      },false)


</script>
<input type="button" id="bar" value="Ribbon_Bar">
<input type="button" id="bar2" value="ID">

Answer 1

I think this is the cause of the error:

use.setAttribute('xlink:href','g1')

The proper syntax is:

use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#g1")

Basically you're missing a hashmark for the link, and you should use the namespace-aware setAttributeNS.

Regarding setAttribute, you should be aware that using prefixes there is not recommended. From DOM 3 Core (the last paragraph in that section):

DOM Level 1 methods are namespace ignorant. Therefore, while it is safe to use these methods when not dealing with namespaces, using them and the new ones at the same time should be avoided.