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

Zoom box

Expand Messages
  • JK_AD
    Hi everyone! I m looking for a way to have a magnification box in the corner of my SVG object that would simply show a zoomed in version of wherever the mouse
    Message 1 of 5 , Apr 2, 2008
    • 0 Attachment
      Hi everyone!

      I'm looking for a way to have a magnification box in the corner of my
      SVG object that would simply show a zoomed in version of wherever the
      mouse cursor is.

      Does anyone know of a way to accomplish this? I will happily elaborate
      if necessary.

      Thanks,

      Alexis Deveria
    • Helder Magalhães
      ... By coincidence, just received a solution very close [1] to what you intend. Shouldn t be hard to modify for it to suit your need. Hope this helps, Helder
      Message 2 of 5 , Apr 2, 2008
      • 0 Attachment
        > I'm looking for a way to have a magnification box in the corner of my
        > SVG object that would simply show a zoomed in version of wherever the
        > mouse cursor is.

        By coincidence, just received a solution very close [1] to what you
        intend. Shouldn't be hard to modify for it to suit your need.

        Hope this helps,

        Helder Magalhães

        [1] https://bugzilla.mozilla.org/show_bug.cgi?id=163068#c40
      • JK_AD
        Thanks Helder, however I actually need something a bit more complicated. I d like the original image to appear in one size, while the magnification box would
        Message 3 of 5 , Apr 2, 2008
        • 0 Attachment
          Thanks Helder, however I actually need something a bit more
          complicated. I'd like the original image to appear in one size, while
          the magnification box would show the zoomed in version at the same time.

          If you've ever used the Windows Magnifier tool (if you use Windows XP,
          it's under Accessories->Accessibility), that's basically the
          functionality I'm looking for.

          Thanks for the link, though.

          Alexis Deveria



          --- In svg-developers@yahoogroups.com, Helder Magalhães
          <helder.magalhaes@...> wrote:
          >
          > > I'm looking for a way to have a magnification box in the corner of my
          > > SVG object that would simply show a zoomed in version of wherever the
          > > mouse cursor is.
          >
          > By coincidence, just received a solution very close [1] to what you
          > intend. Shouldn't be hard to modify for it to suit your need.
          >
          > Hope this helps,
          >
          > Helder Magalhães
          >
          > [1] https://bugzilla.mozilla.org/show_bug.cgi?id=163068#c40
          >
        • David
          Hi Alexis, would something like this fit ?
          Message 4 of 5 , Apr 2, 2008
          • 0 Attachment
            Hi Alexis,

            would something like this fit ?

            <clipPath id="clip">
            <rect x="0" y="0" *width="100" height="100"*/>
            </clipPath>
            <svg clip-path="url(#clip)" >
            <g transform="translate(*50 50*) scale(*3*)">
            <use id="zoom" xlink:href="*#main*" />
            </g>
            </svg>

            <script>
            var zoom = document.getElementById("zoom");
            function moveZoom(evt) {
            var x = -evt.clientX;
            var y = -evt.clientY;
            zoom.setAttribute("transform", "translate("+x+" "+y+")");
            }
            var zoomed = document.getElementById("*main*");
            zoomed.addEventListener("mousemove", moveZoom, false);
            </script>


            <rect width="*100*" height="*100*"> defines the size of the zoom box (
            translate(*50 50*) should change accordingly : it's the center of it).

            scale(*3*) is the zoom factor.

            "main" is the id of the object being magnified.


            (note: this solution probably has some issues if the magnified object reacts
            to some events)

            David


            I'm looking for a way to have a magnification box in the corner of my
            > SVG object that would simply show a zoomed in version of wherever the
            > mouse cursor is.
            >
            > Does anyone know of a way to accomplish this? I will happily elaborate
            > if necessary.
            >


            [Non-text portions of this message have been removed]
          • JK_AD
            Woohoo! Works beautifully. I definitely think this should do the trick. Thank you David, much appreciated! (for anyone wondering, I m thinking of incorporating
            Message 5 of 5 , Apr 2, 2008
            • 0 Attachment
              Woohoo! Works beautifully. I definitely think this should do the trick.

              Thank you David, much appreciated!

              (for anyone wondering, I'm thinking of incorporating this
              functionality in my Opera widget:
              http://widgets.opera.com/widget/9231/ )


              --- In svg-developers@yahoogroups.com, David <leunen.d@...> wrote:
              >
              > Hi Alexis,
              >
              > would something like this fit ?
              >
              > <clipPath id="clip">
              > <rect x="0" y="0" *width="100" height="100"*/>
              > </clipPath>
              > <svg clip-path="url(#clip)" >
              > <g transform="translate(*50 50*) scale(*3*)">
              > <use id="zoom" xlink:href="*#main*" />
              > </g>
              > </svg>
              >
              > <script>
              > var zoom = document.getElementById("zoom");
              > function moveZoom(evt) {
              > var x = -evt.clientX;
              > var y = -evt.clientY;
              > zoom.setAttribute("transform", "translate("+x+" "+y+")");
              > }
              > var zoomed = document.getElementById("*main*");
              > zoomed.addEventListener("mousemove", moveZoom, false);
              > </script>
              >
              >
              > <rect width="*100*" height="*100*"> defines the size of the zoom box (
              > translate(*50 50*) should change accordingly : it's the center of it).
              >
              > scale(*3*) is the zoom factor.
              >
              > "main" is the id of the object being magnified.
              >
              >
              > (note: this solution probably has some issues if the magnified
              object reacts
              > to some events)
              >
              > David
              >
              >
              > I'm looking for a way to have a magnification box in the corner of my
              > > SVG object that would simply show a zoomed in version of wherever the
              > > mouse cursor is.
              > >
              > > Does anyone know of a way to accomplish this? I will happily elaborate
              > > if necessary.
              > >
              >
              >
              > [Non-text portions of this message have been removed]
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.