CODEWITHSUNDEEP
javascriptdomsvg
Zain
Zain

Reputation: 5581

How to dynamically create a g element in svg

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <object id="oo" data="Dynamic_grouping.svg" style="position:fixed;width: 900px;height:750px;bottom:  -220px;right: 180px;">

    </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">
</html>

Upvotes: 5

Views: 15182

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 61046

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.

Upvotes: 11

Related Questions