Home :: Tutorials :: SVG :: Transformations

One of the beauties of Scalable Vector Graphics is that they are...well...scalable. However, if you plan to create interactive SVG images, eventually you will run into challenges tracking the mouse due to the zooming and panning transformations that are available in the SVG viewer.

The SVG that follows is an example that tracks the mouse while taking the following properties into account:

  1. The current zoom level
  2. The current pan
  3. The document's viewBox

As you move the mouse over the image, a mustard-colored circle will follow your cursor. If you pan and zoom the document, you should notice a few things:

  1. Most importantly, the mustard-colored circle continues to follow your mouse
  2. The light-blue background and informational text remain in the same location and at the same size
  3. The red circle scales and translates as you pan and zoom

Each item listed above displays aspects of the functionality in this example. The mustard-colored circle shows that all zoom, pan, and viewBox properties are properly being taken into account. The informational text shows the transformations that are being applied to the mouse coordinate to determine the user coordinate. The light-blue background; however, requires a bit more of a description.

An SVG document without elements is unable to recognize mouse movements. Within the document, you must create an element to capture mouse movements. Typically, a rectangle with an opacity of 0 is used for this purpose. Even though the rectangle is not visible to the end-user, it is still capable of capturing mouse movements. For this example, I created a second rectangle to coincide with the "invisible" one so as to visualize the area that is capturing mouse events. If all calculations are correct, then the entire SVG image should have a light-blue background. NOTE: The code handling this functionality can be used to create navigational elements that are immune to zooming and panning.

The viewBox property creates a bit more of a challenge when tracking the mouse. The content creator can define a custom coordinate system using the viewBox. So, the viewBox introduces additional scaling and translation factors in an SVG document. It is also possible for the viewBox to introduce different scaling factors in the x and y directions. This is sometimes called anamorphic scaling.

Be sure to view the source of this example so that you can read the comments that explain how all of this is being accomplished. You might want to try playing with the viewBox setting to convince yourself that it is being taken into account too.

In order to simplify coding, I placed some restrictions on the SVG document. The outermost SVG element's width and height attributes are set to 100% to allow the HTML embed tag to define the SVG image size. The event-capturing rectangle uses a height and width of 100% so that it will automatically resize with the document. And finally, the preserveAspectRatio is set to "none" to avoid handling the numerous cases made possible by this attribute.