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

Re: Zoom box

Expand Messages
  • David
    Hi Alexis, would something like this fit ?
    Message 1 of 5 , Apr 2 9:47 AM
      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 2 of 5 , Apr 2 10:41 AM
        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.