Francis, Thank you very much for your reply,but i want a solution that drags an svg element instead of whole svg in applied zoom in effect for svg viewbox.
Regards, Vishal --- In [email protected], "Francis Hemsher" <fhemsher@...> wrote: > > Hi Vishal, > > I have used the following to track the cursor as related to inline SVG: > > //---x,y offset values for svgDiv (no page scrolling)--- > function findPos(obj) > { > var curleft = curtop = 0; > if (obj.offsetParent) > { > do { > curleft += obj.offsetLeft; > curtop += obj.offsetTop; > } > while (obj = obj.offsetParent); > > return [curleft,curtop]; > } > } > > var xSVG > var ySVG > function showXY(evt) > { > var posX=findPos(svgDiv)[0] > var posY=findPos(svgDiv)[1] > //---if page scrolling y,x ---- > var offsetY=document.documentElement.scrollTop > var offsetX=document.documentElement.scrollLeft > xSVG=evt.clientX-posX+offsetX > ySVG=evt.clientY-posY+offsetY > > } > > In order to drag from/across one viewPort and drop to another, where they > each have different viewBox values, is tricky but doable. You'll would use > the following SVG goodies: > 1) nearestViewportElement() > 2) getScreenCTM > 3) SVGPoint > 4) matrixTransform > 5) inverse() > 6) getCTM > Plus store the translation x,y value at each DragTarget. > > Assume the DragTarget is the svg element that will be dragged from another > SVG/HTML parent within the HTML document and dropped into the desired SVG, > i.e, your map.svg (shown as mySVG below) > > > var DragTarget=null; > var Dragging = false; > var OffsetX = 0; > var OffsetY = 0; > var Pnt; > //---mouse down over svg element, determine Offset--- > function startDrag(evt) > { > if(Dragging==false) > { > DragTarget=evt.target; > //---reference point to its respective viewport-- > Pnt = DragTarget.nearestViewportElement.createSVGPoint(); > Pnt.x = evt.clientX; > Pnt.y = evt.clientY; > //---elements in different(svg) viewports--- > var sCTM = DragTarget.nearestViewportElement.getScreenCTM(); > Pnt = Pnt.matrixTransform(sCTM.inverse()); > > OffsetX = Pnt.x - parseFloat(DragTarget.getAttribute("transX")); > OffsetY = Pnt.y - parseFloat(DragTarget.getAttribute("transY")); > > Dragging=true; > } > } > > > //---onmousemove--- > function drag(evt) > { > if(Dragging) > { > //---reference point to its respective viewport-- > Pnt = DragTarget.nearestViewportElement.createSVGPoint(); > Pnt.x = evt.clientX; > Pnt.y = evt.clientY; > //---elements in different(svg) viewports--- > var sCTM = DragTarget.nearestViewportElement.getScreenCTM(); > Pnt = Pnt.matrixTransform(sCTM.inverse()); > Pnt.x -= OffsetX; > Pnt.y -= OffsetY; > //---retain values for next Offset--- > DragTarget.setAttribute("transX", Pnt.x); > DragTarget.setAttribute("transY", Pnt.y); > DragTarget.setAttribute("transform", "translate(" + Pnt.x + "," > + Pnt.y + ")"); > } > } > > //---mouseup: drop into new viewPort, and auto transform to its current > viewBox--- > function stopDrag(evt) > { > mySVG.appendChild(DragTarget); > showXY(evt) > Pnt = mySVG.createSVGPoint(); > Pnt.x =xSVG > Pnt.y =ySVG; > //---elements in different(svg) viewports--- > var sCTM = DragTarget.nearestViewportElement.getCTM(); > Pnt = Pnt.matrixTransform(sCTM.inverse()); > Pnt.x -= OffsetX; > Pnt.y -= OffsetY; > DragTarget.setAttribute("transform", "translate(" + Pnt.x + "," > + Pnt.y + ")"); > Dragging = false; > DragTarget=null > OffsetX=0 > OffsetY=0 > } > > I have used this in IE9, and it works nicely. I haven't tested it in other > browsers. > > Regards, > Francis > > > --- In [email protected], "vishal_aegisisc" <vishal_aegisisc@> > wrote: > > > > Dear Friends, > > > > i'm stuck with the below mentioned scenario, > > > > Following Implementations are done, > > > > 1) i'm loading svg in html division as shown below, > > > > $('#SvgDIV').svg({ loadURL: 'map.svg', onLoad: function () { > > // here i'm binding some functionalities with jquery > > } > > }); > > > > here map.svg is representing a map > > > > 2) [Drag and Drop From HTML DIV To SVG] > > > > I have another html division i.e. <div id="pqr" class="drag"> <ul><li > > class="abc" image="xyz.svg">XYZ</li></ul> </div> > > > > here xyz.svg represents an element,And i'm placing/appending this element > > as an svg image tag on above map (i.e. mentioned in point-1), > > To accomplish that I'm dragging this <li> to above loaded svg map in > > "SvgDIV" division with the help of jQuery UI plugin. > > > > As a result,xyz.svg(element) that is binded with <li class="abc"> will be > > appended as an svg image tag in map.svg (map) on the drop event of <li> > > > > > > 3) [Drag and Drop From SVG To SVG] > > > > Drag & Drop of svg element(xyz.svg) in map.svg(map) with the help of jQuery > > UI plugin only. > > > > > > 4) SVG Zoom in out functionality without panning by playing with Viewbox > > coordinates of root element of map SVG i.e. map.svg, > > > > Implemented Point 3 & 4 are Drag and Drop without zooming in/out the > > map,that means map is in its original size and position > > when we are making Drag/Drop From SVG To SVG and From HTML DIV to SVG, > > the issue is with drag and drop of an element along with zoom in/out of the > > map > > > > Issue 1 : Is it possible/feasible If I want to drag & drop element(xyz.svg) > > on map(map.svg) at the time of ZOOM IN IS APPLIED ON THE MAP? > > and if it is correct approach/possible then how to get correct > > position/actual coordinates of element > > in map on drop event of that svg element? (Please suggest any possible way > > to achieve this) > > > > Issue 2 : When i try to drag element from map and drop it to the map only > > that time also getting problem to get actual position/coordinates of > > element on map > > > > Please suggest the possible ways to get rid of it. > > > > Regards, > > Vishal > > > ------------------------------------ ----- To unsubscribe send a message to: [email protected] -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: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
