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 svg-developers@yahoogroups.com, "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 svg-developers@yahoogroups.com, "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: 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/
