Javascript 如何在svg中动态创建g元素 JSP页面 var far=document.getElementById（“oo”） far.addEventListener（“加载”，函数（）{ var svgDoc=far.contentDocument； var svgRoot=svgDoc.documentElement； document.getElementById（“bar”）.onclick=function（）{ var g=svgDoc.createElements（“http://www.w3.org/2000/svg“，“g”）； g、 setAttribute（'id'，'group'）； g、 setAttribute（'shape-rendering'，'inherit'）； g、 setAttribute（'pointer-events'，'all'）； var use=svgDoc.createElements（“http://www.w3.org/2000/svg“，“使用”）使用.setAttributeNS（“http://www.w3.org/1999/xlink“，“xlink:href”，“#g1”） use.setAttributeNS（null，“id”，“u”） svgRoot.appendChild（使用） var create_bar=svgDoc.createElements（“http://www.w3.org/2000/svg“，“rect”）创建\u-bar.setAttribute（“id”、“r\u-bar”）创建_bar.setAttribute（“填充”、“奶油”）创建_bar.setAttribute（“x”，“300px”）创建_bar.setAttribute（“y”、“50px”）创建_bar.setAttribute（“宽度”，“100px”）创建_bar.setAttribute（“高度”，“30px”）创建_bar.setAttribute（“指针事件”、“继承”） g、 appendChild（创建工具栏） var cir=svgDoc.createElements（“http://www.w3.org/2000/svg“，”圆圈“）； 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、附加儿童（cir） svgRoot.appendChild（g） } var btn_id=document.getElementById（'bar2'） btn_id.onclick=函数（） { var a=svgDoc.getElementById（'r\u bar'）） var b=svgDoc.getElementById（'组'） var c=svgDoc.getElementById（'cir'） var d=svgDoc.getElementById（'u'）警报（a.id+“.”+b.id+“.”+c.id+“.”+d.id） } }，错）_Javascript_Dom_Svg

Javascript 如何在svg中动态创建g元素 JSP页面 var far=document.getElementById（“oo”） far.addEventListener（“加载”，函数（）{ var svgDoc=far.contentDocument； var svgRoot=svgDoc.documentElement； document.getElementById（“bar”）.onclick=function（）{ var g=svgDoc.createElements（“http://www.w3.org/2000/svg“，“g”）； g、 setAttribute（'id'，'group'）； g、 setAttribute（'shape-rendering'，'inherit'）； g、 setAttribute（'pointer-events'，'all'）； var use=svgDoc.createElements（“http://www.w3.org/2000/svg“，“使用”）使用.setAttributeNS（“http://www.w3.org/1999/xlink“，“xlink:href”，“#g1”） use.setAttributeNS（null，“id”，“u”） svgRoot.appendChild（使用） var create_bar=svgDoc.createElements（“http://www.w3.org/2000/svg“，“rect”）创建\u-bar.setAttribute（“id”、“r\u-bar”）创建_bar.setAttribute（“填充”、“奶油”）创建_bar.setAttribute（“x”，“300px”）创建_bar.setAttribute（“y”、“50px”）创建_bar.setAttribute（“宽度”，“100px”）创建_bar.setAttribute（“高度”，“30px”）创建_bar.setAttribute（“指针事件”、“继承”） g、 appendChild（创建工具栏） var cir=svgDoc.createElements（“http://www.w3.org/2000/svg“，”圆圈“）； 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、附加儿童（cir） svgRoot.appendChild（g） } var btn_id=document.getElementById（'bar2'） btn_id.onclick=函数（） { var a=svgDoc.getElementById（'r\u bar'）） var b=svgDoc.getElementById（'组'） var c=svgDoc.getElementById（'cir'） var d=svgDoc.getElementById（'u'）警报（a.id+“.”+b.id+“.”+c.id+“.”+d.id） } }，错）

javascript dom svg

Javascript 如何在svg中动态创建g元素 JSP页面 var far=document.getElementById（“oo”） far.addEventListener（“加载”，函数（）{ var svgDoc=far.contentDocument； var svgRoot=svgDoc.documentElement； document.getElementById（“bar”）.onclick=function（）{ var g=svgDoc.createElements（“http://www.w3.org/2000/svg“，“g”）； g、 setAttribute（'id'，'group'）； g、 setAttribute（'shape-rendering'，'inherit'）； g、 setAttribute（'pointer-events'，'all'）； var use=svgDoc.createElements（“http://www.w3.org/2000/svg“，“使用”）使用.setAttributeNS（“http://www.w3.org/1999/xlink“，“xlink:href”，“#g1”） use.setAttributeNS（null，“id”，“u”） svgRoot.appendChild（使用） var create_bar=svgDoc.createElements（“http://www.w3.org/2000/svg“，“rect”）创建\u-bar.setAttribute（“id”、“r\u-bar”）创建_bar.setAttribute（“填充”、“奶油”）创建_bar.setAttribute（“x”，“300px”）创建_bar.setAttribute（“y”、“50px”）创建_bar.setAttribute（“宽度”，“100px”）创建_bar.setAttribute（“高度”，“30px”）创建_bar.setAttribute（“指针事件”、“继承”） g、 appendChild（创建工具栏） var cir=svgDoc.createElements（“http://www.w3.org/2000/svg“，”圆圈“）； 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、附加儿童（cir） svgRoot.appendChild（g） } var btn_id=document.getElementById（'bar2'） btn_id.onclick=函数（） { var a=svgDoc.getElementById（'r\u bar'）） var b=svgDoc.getElementById（'组'） var c=svgDoc.getElementById（'cir'） var d=svgDoc.getElementById（'u'）警报（a.id+“.”+b.id+“.”+c.id+“.”+d.id） } }，错）,javascript,dom,svg,Javascript,Dom,Svg,我认为这就是错误的原因： use.setAttribute（'xlink:href'，'g1'）正确的语法是： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body>

我认为这就是错误的原因：

use.setAttribute（'xlink:href'，'g1'）

正确的语法是：

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

基本上，您缺少链接的hashmark，应该使用支持名称空间的setAttributeNS

关于setAttribute，您应该知道不建议使用前缀。摘自（该节最后一段）：

DOM级别1方法是命名空间无知的。因此，在安全的情况下在不进行交易时使用这些方法使用名称空间，使用它们和同时新的应该是避免

我已经更新了代码Erik，但仍然没有进展。。。！我已经修改了代码并更新了新代码。请看一看……KindlyErik，以下是我想在web应用程序中包含的功能要点。使用鼠标，用户可以围绕svg对象绘制一个矩形，从而选择所有对象。所有这些对象将被分组在一起，如果用户愿意，他可以将组移动到另一个位置，组内的所有对象将一致移动（保持彼此之间的距离）。希望这能勾勒出我试图实现的功能。周围的html+脚本在哪里？例如，如果您试图在

或

标记上捕获鼠标事件，那么这将不起作用。您的onclick处理程序是否被调用？（例如通过警报进行验证）。是的，我的onlick处理程序名为。。。。。！它工作正常。我认为在一些动态创作中有一个小问题。。。。！此问题自首次发布以来必须已更新/更改。这不再是一个问题，也没有答案指出的错误。

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