如何在svg中动态创建一个g元素答案

【问题标题】：How to dynamically create a g element in svg如何在svg中动态创建一个g元素
【发布时间】：2011-04-30 03:27:39
【问题描述】：

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

【问题讨论】：

此问题自首次发布以来必须已更新/更改。这不再是一个问题，也没有答案指出的错误。

标签： javascript dom svg

【解决方案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 方法是命名空间愚昧。因此，虽然它是安全的在不交易时使用这些方法使用命名空间，使用它们和新的同时应该是避免。

【讨论】：

我已经更新了代码 Erik 但仍然没有进展......！我已经更改了代码并更新了新的..请看一下...请注意
Erik，这是我想在 Web 应用程序中加入的功能的要点。使用鼠标，用户可以在 svg 对象周围绘制一个矩形，从而选择所有对象。然后所有这些对象将被组合在一起，如果用户愿意，他可以将组移动到另一个位置，并且组内的所有对象将一致移动（保持彼此之间的距离）。希望这能勾勒出我正在尝试实现的功能。
周围的html+scripts在哪里？例如，如果您尝试在 <object> 或 <embed> 标签上捕获鼠标事件，那么这是行不通的。您的 onclick 处理程序是否被调用？（例如通过警报验证）。
是的，我的 onlick 处理程序被称为.....！它工作正常。我认为在一些动态创建小问题中存在问题......！