This example shows how you can accumulate all transformations that lead to the final rendering of an element. Using the inverse of this transformation and by taking the current zoom and pan into account, you can convert the current mouse position to a coordinate within the element's coordinate space.

The image below shows the same rectangle with various transformations applied to it. The untransformed rectangle is defined with the following SVG:

<rect x="-2" y="0" width="10" height="10"/>

Based on this rectangle's definition, the x user coordinates should range from [-2, 8] and the y user coordinates should range from [0,10].

Try different zoom levels and panning. The mouse coordinates will reflect the current zoom and pan settings, but the user coordinates should remain within the intervals listed above. I have noticed slight errors with the rotated and skewed versions of the rectangle. I welcome any suggestions on how I can improve the accuracy of these calculations.

A future version of this example will take the viewBox into account.

---

Copyright 2000-2003, Kevin Lindsey