title: How to dynamically create a g element in svg
body: <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;JSP Page&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;object id="oo" data="Dynamic_grouping.svg" style="position:fixed;width: 900px;height:750px;bottom:  -220px;right: 180px;"&gt;
  
      &lt;/object&gt;
  
      &lt;/body&gt;
      &lt;script type="text/javascript"&gt;
                      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)
  
  
      &lt;/script&gt;
      &lt;input type="button" id="bar" value="Ribbon_Bar"&gt;
      &lt;input type="button" id="bar2" value="ID"&gt;
  &lt;/html&gt;
  </code></pre>