Question

<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>

Answer 1

我认为这是错误的原因：

use.setAttribute（ '的xlink：href' 属性， 'G1'）

正确的语法是：

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

基本上你缺少链接的哈希标记，你应该使用名称空间感知的setAttributeNS。

关于setAttribute，您应该知道不建议使用前缀。来自DOM 3 Core（该部分的最后一段）：

DOM Level 1方法是命名空间愚昧。因此，虽然它是安全的在不处理时使用这些方法使用命名空间，使用它们和同时应该是新的避免。

如何在svg中动态创建g元素

1 个答案: