Zoom/Pan with viewBox

Normally, in a minimap with zoom/pan scenario, we spend calculation cycles figuring out how to scale movements between the minimap’s coordinates and the main image’s coordinates.

These calculations normally happen in the callback function (every time the mouse moves). Those calculations are then used to transform elements within an SVG (translate and scale).

The things to keep track of then:

1. The minimap’s dimensions and scale
2. The main SVG’s dimensions and scale
3. Converting between the two coordinate systems
4. Calculating the scaled transform
5. Applying the transform to the main SVG.

Bill D. White’s work is widely referenced by d3 practitioners. This example is an attempt to reimplement his method, while reducing programmatic complexity.

To make this work:

1. The SVG needs an id and a viewport. The following attributes, then, are required:
   • id is to uniquely identify the image for later reuse
   • height provides the viewport’s height
   • width provides the viewport’s width
2. The SVG needs to nest inside a container SVG, which serves as an aperture and magnifier.
3. The aperture SVG needs the following attributes:
   • viewBox
   • preserveAspectRatio
4. the MiniMap SVG has the following attribute:
   • viewBox - identical to the target SVG’s initial viewBox/dimensions.
5. The image in the MiniMap is rendered using SVG’s <use>
   • The target SVG needs to be inline for this to work properly.

References

• Bill’s blog post
• and the ensuing discussion
• A most important primer on SVG coordinate systems

Built with blockbuilder.org