Translate Element to Exact screen coordinates

[Willy Nolan]

Hi,

I have loaded SVGs onto my page, and I want to be able to move them to exact screen coordinates.  I assume I have to use translate for this.  The only problem is that translate takes this bizarre transform string, so I can't figure out how to move an element to a specific location on the page.  Can anyone tell me how they would shift an element to an exact position on the screen?

Here is a fiddle with the idea.

http://jsfiddle.net/WH3hR/3/

[Thomas Shinnick]

Some comments...

The call to  moveDown()  needs to coordinate with the return from Snap.load .  You can't move things until you know they have been loaded and actually exist!  :-)


And you keep saying screen coordinates, but do you really mean 'screen'?  There is positioning objects within the SVG area, and separately you could position the SVG itself within the browser window.

Moving a drawn object to different places on the SVG drawing surface can be done with the  .transform()  call and the SVG transformation operations.  If you wanted to move a drawn shape to those SVG surface coordinates it would be something like
      element.transform("translate(100.5,213.7)")

But if you want to move a document object, like a <div> or the <svg> element, then you need to do DOM operations, asking the browser to place the container element and everything it contains someplace specific.  That can be done, but that's entirely different from the SVG API.  Two "different worlds" if you like.  And it isn't so neat in DOM.

For instance, using jQuery API I can say:
    // Bring palette back onto screen
    $(paletteDiv).offset({left: 475, top: 30});
to put a particular <div> at a particular place.  But to allow that flexibility that I had to set certain mysterious attributes on the <div>.  Using CSS I said:
      .bsyl_palette_popup {
          overflow:   hidden;
          position:   absolute;
          left:       -10000px;
          top:        -10000px;
      }
The  position: absolute  said this was no normal <div> but is movable.  It also said it has no normal place in the page - you have to control the placement.  It can get messy.

 
So...  do you want to move object to specific places within the SVG area, or are you wanting to move the SVG within the browser window?

[Willy Nolan]

This might do a better job of asking my question.

https://groups.google.com/forum/#!topic/snapsvg/O0BJUgGhA-Q

[Ian]

You could use the method getBBox to figure where the Cap is, and then subtract from that so something like...

http://jsfiddle.net/HyF2y/3/

Snap.load("https://dl.dropboxusercontent.com/u/57988096/ss4.svg", function (f) {

    s.append(f);

    cap = Snap.select('#Capper');

});

function move(dx,dy) {

    cap.transform('t' + (xcord - dx) + ',' + (ycord - dy ) );

//I want to move the cap to the dot, but because x and y are absolute coordinates and the element is being translated relative to its initial position, the values are wrong.

}

document.onclick = function ( ev ) {

    var bb = cap.getBBox();

    move( bb.x + bb.width/2, bb.y + bb.height/2 ); // get the centre point of the object to move

}

[Willy Nolan]

Wow, great, thanks Ian!

[Thomas Shinnick]

Why do people "delete questions" from this group?

Now we don't know what Ian's answer was....

A few days ago after working up an answer for over an hour ... that question was gone.  _nobody_ got to see an answer...

[Willy Nolan]

I agree and am also curious about that, I really wanted to hear your feedback to my follow up question.

I also meant to thank you for your first, very helpful response.  

I have found that locating objects exactly where I want them on the page can be tricky, (for the reason you pointed out in your earlier post) and also because of the variation that can happen while using screenX or pageX coordinates . If you add an .svg element, and then some .divs, and then more .svg elements, they can all be placed out of whack.

If you want an .svg to cover the width or the entire height of the page, that too can be hard as var s = Snap('100%','100%') will only get the full width (not height for some reason).  I know there are jQuery workarounds. 

If anyone is having similar issues, one thing that can be done, and has been mentioned before, is to make the entire page an SVG element and send it to the "back" using CSS's Z-Index.

Again Thomas thank you because, although I have no experience in moving html elements around on the page with JS yet, i may need to do so in the future. 

[Ian]

If you can let me know what the question was, I may be able to find the fiddle or something, not sure which question/answer we are talking about though :) Confusing isn't it :).