Loading ...
Sorry, an error occurred while loading the content.

Zoom In Out wih SVG

Expand Messages
  • barkha
    Dear All, I want to Implement zoom-in and out of the static map background and all sub entities(that are placed on static map background on another layer) by
    Message 1 of 12 , Jun 6, 2012
    • 0 Attachment
      Dear All,

      I want to Implement zoom-in and out of the static map background and all sub entities(that are placed on static map background on another layer) by point-and-click on the map. Point clicked is centered as part of the zoom operation

      Regards,
      Barkha
    • David Dailey
      Hi Barkha, Take a look at this example; it may give some ideas on how to zoom on all or part of an SVG
      Message 2 of 12 , Jun 6, 2012
      • 0 Attachment
        Hi Barkha,



        Take a look at this example; it may give some ideas on how to zoom on all or
        part of an SVG

        http://srufaculty.sru.edu/david.dailey/svg/recent/sliderzoom2.svg



        This example now seems to work everywhere but in Safari/Windows (which has
        pretty spotty SVG support*, lagging a half year or so behind Chrome it would
        seem). Chrome just recently became able to handle it, if I remember
        correctly.



        In another case:
        http://srufaculty.sru.edu/david.dailey/svg/newstuff/zoom.svg the viewBox is
        simply animated (works properly in Opera, IE/ASV, and I think old versions
        of Firefox - won't work in webkit since animate support is still fledgling,
        and new Firefox seems to have resurrected an old problem with when events
        fire - it could be that my code here is just old and brittle since I wrote
        it in 2005 or so, but the principle should be the same if one reworks all
        the scripted DOM stuff with simple SVG).



        At present, each author writes his or her own pan and zoom functionality,
        despite the spec having perfunctory language requiring some of that
        functionality to be native (albeit nonstandard). Maybe SVG 2.0 will give
        some relief; I'm not sure what was decided here.



        Cheers

        David



        From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
        On Behalf Of barkha
        Sent: Wednesday, June 06, 2012 6:32 AM
        To: svg-developers@yahoogroups.com
        Subject: [svg-developers] Zoom In Out wih SVG





        Dear All,

        I want to Implement zoom-in and out of the static map background and all sub
        entities(that are placed on static map background on another layer) by
        point-and-click on the map. Point clicked is centered as part of the zoom
        operation

        Regards,
        Barkha







        [Non-text portions of this message have been removed]
      • jamesd
        SVGpan works extremely well. The only thing is that your map should be in an iframe to avoid cross SVG confusion. http://code.google.com/p/svgpan/ James
        Message 3 of 12 , Jun 6, 2012
        • 0 Attachment
          SVGpan works extremely well. The only thing is that your map should be in an iframe to avoid cross SVG confusion.

          http://code.google.com/p/svgpan/

          James


          --- In svg-developers@yahoogroups.com, "barkha" <barkha_crazzyworld@...> wrote:
          >
          > Dear All,
          >
          > I want to Implement zoom-in and out of the static map background and all sub entities(that are placed on static map background on another layer) by point-and-click on the map. Point clicked is centered as part of the zoom operation
          >
          > Regards,
          > Barkha
          >
        • yannick.bochatay@free.fr
          no API, countless global variables, browser sniffing, etc, to my mind SVGPan is not a good choice. But it s short and standalone so it can help to understand
          Message 4 of 12 , Jun 7, 2012
          • 0 Attachment
            no API, countless global variables, browser sniffing, etc, to my mind SVGPan is not a good choice.
            But it's short and standalone so it can help to understand how a zoom can work.
            Yannick


            ----- Mail original -----
            De: "jamesd" <jcdeering1@...>
            À: svg-developers@yahoogroups.com
            Envoyé: Mercredi 6 Juin 2012 22:33:37
            Objet: [svg-developers] Re: Zoom In Out wih SVG







            SVGpan works extremely well. The only thing is that your map should be in an iframe to avoid cross SVG confusion.

            http://code.google.com/p/svgpan/

            James

            --- In svg-developers@yahoogroups.com , "barkha" <barkha_crazzyworld@...> wrote:
            >
            > Dear All,
            >
            > I want to Implement zoom-in and out of the static map background and all sub entities(that are placed on static map background on another layer) by point-and-click on the map. Point clicked is centered as part of the zoom operation
            >
            > Regards,
            > Barkha
            >
          • Erik Dahlstrom
            ... The SVGPan library has some bugs that needs to be patched in to make it actually work well, see e.g http://code.google.com/p/svgpan/issues/detail?id=6 for
            Message 5 of 12 , Jun 7, 2012
            • 0 Attachment
              On Wed, 06 Jun 2012 22:33:37 +0200, jamesd <jcdeering1@...> wrote:

              >
              > SVGpan works extremely well. The only thing is that your map should be
              > in an iframe to avoid cross SVG confusion.
              >
              > http://code.google.com/p/svgpan/
              >
              > James

              The SVGPan library has some bugs that needs to be patched in to make it
              actually work well, see e.g
              http://code.google.com/p/svgpan/issues/detail?id=6 for how badly it's
              broken.

              Also most people probably expect to be able to zoom and pan without having
              a mouse (or a scrollwheel mouse even). There's no support for touch events
              in this library.

              --
              Erik Dahlstrom, Core Technology Developer, Opera Software
              Co-Chair, W3C SVG Working Group
              Personal blog: http://my.opera.com/macdev_ed
            • jamesd
              All I can say is that SVGpan is working extremely well for me. It allows the user to scroll the image on the trackpad without a mouse, I assume on a tablet
              Message 6 of 12 , Jun 7, 2012
              • 0 Attachment
                All I can say is that SVGpan is working extremely well for me. It allows the user to scroll the image on the trackpad without a mouse, I assume on a tablet you're finger swipe will do the same thing (Is that what you mean by touch events?).

                --- In svg-developers@yahoogroups.com, "Erik Dahlstrom" <ed@...> wrote:

                > The SVGPan library has some bugs that needs to be patched in to make it
                > actually work well, see e.g
                > http://code.google.com/p/svgpan/issues/detail?id=6 for how badly it's
                > broken.
                >
                > Also most people probably expect to be able to zoom and pan without having
                > a mouse (or a scrollwheel mouse even). There's no support for touch events
                > in this library.
                >
                > --
                > Erik Dahlstrom, Core Technology Developer, Opera Software
                > Co-Chair, W3C SVG Working Group
                > Personal blog: http://my.opera.com/macdev_ed
                >
              • jamesd
                All I can say is that SVGpan is working extremely well for me. It allows the user to scroll the image on the trackpad without a mouse, I assume on a tablet
                Message 7 of 12 , Jun 7, 2012
                • 0 Attachment
                  All I can say is that SVGpan is working extremely well for me. It allows the user to scroll the image on the trackpad without a mouse, I assume on a tablet you're finger swipe will do the same thing (Is that what you mean by touch events?).

                  --- In svg-developers@yahoogroups.com, "Erik Dahlstrom" <ed@...> wrote:

                  > The SVGPan library has some bugs that needs to be patched in to make it
                  > actually work well, see e.g
                  > http://code.google.com/p/svgpan/issues/detail?id=6 for how badly it's
                  > broken.
                  >
                  > Also most people probably expect to be able to zoom and pan without having
                  > a mouse (or a scrollwheel mouse even). There's no support for touch events
                  > in this library.
                  >
                  > --
                  > Erik Dahlstrom, Core Technology Developer, Opera Software
                  > Co-Chair, W3C SVG Working Group
                  > Personal blog: http://my.opera.com/macdev_ed
                  >
                • Erik Dahlstrom
                  Panning with the SVGPan library seems to works in all the desktop browsers sure, but zooming doesn t work at all in Opera or IE because the library is doing
                  Message 8 of 12 , Jun 8, 2012
                  • 0 Attachment
                    Panning with the SVGPan library seems to works in all the desktop browsers
                    sure, but zooming doesn't work at all in Opera or IE because the library
                    is doing browser sniffing and assuming the wrong things. And it's likely
                    that the rate of zooming is different in the different browsers too, if
                    that matters (see e.g
                    http://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers).

                    There are no listeners registered for touch events, so I'd be surprised if
                    the panning worked as intended on tablets or mobile phones, and I'd be
                    even more surprised if there was something like scrollwheel emulation on
                    such devices, so probably you won't have the ability to zoom with SVGPan
                    unless you hack the library yourself.

                    To conclude, the SVGPan library works to its full extent only if:
                    1) the user has a mouse
                    2) the user is using a webkit- or mozilla-based browser

                    These shortcomings can of course be fixed.

                    If you want something that abstracts away the ways you trigger zooming and
                    panning, D3.js has some behaviour helper methods to help you with that,
                    see https://github.com/mbostock/d3/blob/master/src/behavior/drag.js and
                    https://github.com/mbostock/d3/blob/master/src/behavior/zoom.js. An
                    example of it being used: http://bl.ocks.org/1182434 - works fine on
                    tablets as well as normal desktop systems. Or for a simpler example,
                    https://github.com/mbostock/d3/blob/master/examples/zoom-pan/zoom-pan-transform.html.


                    On Thu, 07 Jun 2012 20:14:50 +0200, jamesd <jcdeering1@...> wrote:

                    > All I can say is that SVGpan is working extremely well for me. It allows
                    > the user to scroll the image on the trackpad without a mouse, I assume
                    > on a tablet you're finger swipe will do the same thing (Is that what you
                    > mean by touch events?).
                    >
                    > --- In svg-developers@yahoogroups.com, "Erik Dahlstrom" <ed@...> wrote:
                    >
                    >> The SVGPan library has some bugs that needs to be patched in to make it
                    >> actually work well, see e.g
                    >> http://code.google.com/p/svgpan/issues/detail?id=6 for how badly it's
                    >> broken.
                    >>
                    >> Also most people probably expect to be able to zoom and pan without
                    >> having
                    >> a mouse (or a scrollwheel mouse even). There's no support for touch
                    >> events
                    >> in this library.
                    >>
                    >> --
                    >> Erik Dahlstrom, Core Technology Developer, Opera Software
                    >> Co-Chair, W3C SVG Working Group
                    >> Personal blog: http://my.opera.com/macdev_ed
                    >>
                    >
                    >


                    --
                    Erik Dahlstrom, Core Technology Developer, Opera Software
                    Co-Chair, W3C SVG Working Group
                    Personal blog: http://my.opera.com/macdev_ed
                  • Jason Barnabas
                    ... I don t know if you found the answer you were looking for, but I found: http://www.carto.net/svg/samples/viewbox.shtml I like this site and have found
                    Message 9 of 12 , Jun 9, 2012
                    • 0 Attachment
                      > Dear All,
                      >
                      > I want to Implement zoom-in and out of the static map background and all sub
                      >entities(that are placed on static map background on another layer) by
                      >point-and-click on the map. Point clicked is centered as part of the zoom
                      >operation
                      >
                      > Regards,
                      > Barkha

                      I don't know if you found the answer you were looking for, but I found:
                      http://www.carto.net/svg/samples/viewbox.shtml

                      I like this site and have found other useful tutorials there.
                      ____________________________________________________________


                      I must be travelling,
                      Jason


                      tc+ ?23 ?mgt mt tne ?t20 t4++ ?t5 ?tp tg+ ?th ?to
                      ru- ge++ 3i c++ jt- au+ ls pi+ ta+ he+

                      kk++ hi+ as+ va+ dr ?ith vr ne so+ zh vi da sy
                    • yannick.bochatay@free.fr
                      I ve worked on a library with zoom and pan features : http://ybochatay.fr/CariSVG/ It works fine but I won t maintain it : I m completely rewriting it with a
                      Message 10 of 12 , Jun 9, 2012
                      • 0 Attachment
                        I've worked on a library with zoom and pan features : http://ybochatay.fr/CariSVG/
                        It works fine but I won't maintain it : I'm completely rewriting it with a wrapper (instead of working with prototypes), a better API and in a way to get autocompletion in Eclipse.
                        Here's a first draft for mousewheel zoom, marquee zoom, magnifying glass and more : http://ybochatay/radar
                        It works on all major browsers. The only problem is... it's not ready yet !
                        Yannick



                        ----- Mail original -----

                        De: "Jason Barnabas" <jtbarnabas@...>
                        À: svg-developers@yahoogroups.com
                        Envoyé: Samedi 9 Juin 2012 14:40:03
                        Objet: Re: [svg-developers] Zoom In Out wih SVG








                        Dear All,

                        I want to Implement zoom-in and out of the static map background and all sub
                        entities(that are placed on static map background on another layer) by
                        point-and-click on the map. Point clicked is centered as part of the zoom
                        operation

                        Regards,
                        Barkha

                        I don't know if you found the answer you were looking for, but I found:


                        http://www.carto.net/svg/samples/viewbox.shtml

                        I like this site and have found other useful tutorials there.
                        __________________________________________________________

                        I must be travelling,
                        Jason

                        tc+ ?23 ?mgt mt tne ?t20 t4++ ?t5 ?tp tg+ ?th ?to
                        ru- ge++ 3i c++ jt- au+ ls pi+ ta+ he+

                        kk++ hi+ as+ va+ dr ?ith vr ne so+ zh vi da sy
                      • barkha
                        Thanks all for replying, Now i m stuck with the below mentioned scenario, Zoom in out functionality without panning is done by playing with Viewbox coordinates
                        Message 11 of 12 , Jul 23, 2012
                        • 0 Attachment
                          Thanks all for replying,

                          Now i'm stuck with the below mentioned scenario,

                          Zoom in out functionality without panning is done by playing with Viewbox coordinates of root element of SVG,

                          Drag and Drop of elements(From HTML Div to SVG Map and also from SVG Map to SVG Map) is implemented without zoom in.

                          Now i want to zoom my svg map (where i'm placing elements by drag and drop) along with drag and drop of elements with the above mentioned possibilities of drag drop.so my question is,Is it possible/feasible to drag and drop elements while map is zoomed in?and if it is correct approach then how to get correct position of cursor in map while drop event of element?

                          Regards,
                          Barkha
                        • yannick.bochatay@free.fr
                          Hi Barkha, the getScreenCTM method will help you (http://www.w3.org/TR/SVG/types.html#__svg__SVGLocatable__getScreenCTM). I wrote a little example :
                          Message 12 of 12 , Jul 23, 2012
                          • 0 Attachment
                            Hi Barkha,
                            the getScreenCTM method will help you (http://www.w3.org/TR/SVG/types.html#__svg__SVGLocatable__getScreenCTM).
                            I wrote a little example : http://jsfiddle.net/ybochatay/aUYay/
                            by clicking in the svg area you'll get the coordinates of your mouse relatively to the specified viewbox.
                            Regards,
                            Yannick

                            ----- Mail original -----
                            De: "barkha" <barkha_crazzyworld@...>
                            À: svg-developers@yahoogroups.com
                            Envoyé: Lundi 23 Juillet 2012 13:16:26
                            Objet: [svg-developers] Re: Zoom In Out wih SVG






                            Thanks all for replying,

                            Now i'm stuck with the below mentioned scenario,

                            Zoom in out functionality without panning is done by playing with Viewbox coordinates of root element of SVG,

                            Drag and Drop of elements(From HTML Div to SVG Map and also from SVG Map to SVG Map) is implemented without zoom in.

                            Now i want to zoom my svg map (where i'm placing elements by drag and drop) along with drag and drop of elements with the above mentioned possibilities of drag drop.so my question is,Is it possible/feasible to drag and drop elements while map is zoomed in?and if it is correct approach then how to get correct position of cursor in map while drop event of element?

                            Regards,
                            Barkha
                          Your message has been successfully submitted and would be delivered to recipients shortly.