The example at http://srufaculty.sru.edu/david.dailey/svg/drag.svg may help.
There are objects of different complexity including clipPaths and groups that
are draggable. The clipPaths are working "appropriately" to my thinking in
Opera and IE/ASV but not in FF4b or WebKit (though I haven't tried the nightly
builds and can't recall if I already submitted bug reports or not). The other
object behave okay in all browsers I can easily test, so that should inform
about the dragging of groups
The key in groups is to get the currentTarget rather than the target of the evt.
cheers
David
----- Original Message -----
From: Mr Rauf
To: svg-developers@yahoogroups.com
Sent: Wednesday, November 10, 2010 5:52 AM
Subject: [svg-developers] Dynamically create <g> in svg
Hi
i want to move all the elements which are group together in the
following code but on draging only the specific element is moved..i am
nt able to move the all elements.. whereas i want to move the elements
in a group..! kindly tell me how to group the svg elements
dynamically...!
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", "#group")
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)
[Non-text portions of this message have been removed]
[Non-text portions of this message have been removed]
------------------------------------
-----
To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
svg-developers-dig...@yahoogroups.com
svg-developers-fullfeatu...@yahoogroups.com
<*> To unsubscribe from this group, send an email to:
svg-developers-unsubscr...@yahoogroups.com
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
