How to dynamically create a g element in svg_问答_开发者

How to dynamically create a g element in svg

开发者 https://www.devze.com 2023-01-21 15:32 出处：网络

<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 svgD开发者_如何学Coc=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>

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.