By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,771 Members | 1,709 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,771 IT Pros & Developers. It's quick & easy.

SVG: How to click & drag ?

P: n/a
I have an application that generates a page with an embedded SVG image
in it. The image (the viewport) is intentionally larger than the
screen (the browser's window size). I would like to provide the
ability for the user to click on the image and drag it around so that
he can see the parts that are off-screen - much like he would use the
scroll bars to move it left/right and up/down.

Note that I am NOT talking about dragging a specific element around -
I want to be able to move the entire image without changing the image
in any way. Also, I'm NOT talking about drag-and-drop.

Can anyone tell me how this might be done? Or, perhaps point me to
some on-line examples?

Thanks.

Mar 18 '08 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Martin wrote:
I have an application that generates a page with an embedded SVG image
in it. The image (the viewport) is intentionally larger than the
screen (the browser's window size). I would like to provide the
ability for the user to click on the image and drag it around so that
he can see the parts that are off-screen - much like he would use the
scroll bars to move it left/right and up/down.

Note that I am NOT talking about dragging a specific element around -
I want to be able to move the entire image without changing the image
in any way. Also, I'm NOT talking about drag-and-drop.
It's called panning, I think the Adobe SVG viewer supports with
Control-Click.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Mar 18 '08 #2

P: n/a
On Tue, 18 Mar 2008 17:01:05 +0100, Martin Honnen <ma*******@yahoo.de>
wrote:
>Martin wrote:
>I have an application that generates a page with an embedded SVG image
in it. The image (the viewport) is intentionally larger than the
screen (the browser's window size). I would like to provide the
ability for the user to click on the image and drag it around so that
he can see the parts that are off-screen - much like he would use the
scroll bars to move it left/right and up/down.

Note that I am NOT talking about dragging a specific element around -
I want to be able to move the entire image without changing the image
in any way. Also, I'm NOT talking about drag-and-drop.
>It's called panning, I think the Adobe SVG viewer supports with
Control-Click.
Thanks, Martin.

Wow, that was easy - I don't have to program or script anything!

BTW, it's Alt-Click rather than Control-Click. Control-Click seems to
provide a zoom functionality.

The problem now is - this seems to work only in IE (with the Adobe
viewer); Alt-Click (or Control-Click) doesn't do anything in FF. Do
you know if there's any way to get similar behavior in FF?
Mar 18 '08 #3

P: n/a
Martin wrote:
The problem now is - this seems to work only in IE (with the Adobe
viewer); Alt-Click (or Control-Click) doesn't do anything in FF. Do
you know if there's any way to get similar behavior in FF?
The bug is https://bugzilla.mozilla.org/show_bug.cgi?id=163068, it looks
like they are still debating on how to expose that functionality.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Mar 18 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.