<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> 
- 1This question must have been updated/changed since it was first posted. It's no longer a question, and it doesn't have the errors that the answer points out.Erik Dahlström– Erik Dahlström2011-06-23 13:13:13 +00:00Commented Jun 23, 2011 at 13:13
Add a comment |
1 Answer
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.
12 Comments
Zain
i have update the code Erik but still not progress...! i have chnge the code and update the new one..please have a look ...Kindly
Zain
Erik, Here is the gist of the functionality I want to incorporate in the web application. With the mouse, the user can draw a rectangle around svg objects, thereby selecting all the objects. All these objects will be grouped together then and if the user desires, he can move the group to another position and all the objects inside the group would move in unison (maintaining their distance from/to eachother). Hope this sketches out the kind of functionality I am trying to implement.
Erik Dahlström
Where's the surrounding html+scripts? If you're trying to capture mouse events on an
<object> or <embed> tag for example then that's not going to work. Does your onclick handler get called? (verify e.g with an alert).Zain
<body> <object id="oo" data="Dynamic_grouping.svg" style="position:fixed;width: 900px;height:750px;bottom: -220px;right: 180px;"> </object> </body>
Zain
yes my onlick handler is called.....! it working correctly . i think there is a problem in some Dynamic creation little bit problem....!
|