SVG Transform Rectangle for HTML5 / JavaScript

Recently I needed to implement a way to allow users to scale and rotate SVG elements in a HTML5 app. I ended up going with the traditional transform rectangle as shown below.


I thought others may find this transform rectangle useful, so I’ve shared out the code on Github.

Visit SVG Transform Rectangle on Github

View Demo Online

Basic Usage

Creating a new Transform Rectangle

Position, Size and Rotate Rectangle

Note that the x, y position of the rectangle is currently the visual center of the rectangle.

Apply Transform to other Elements

You’ll want to listen for changes in width, height and rotation on the model of the transform rectangle object.  I’ve left the transform of other elements up to the developer to implement.

One thought on “SVG Transform Rectangle for HTML5 / JavaScript

  1. Pingback: SVG Transform Rectangle for HTML5 / JavaScript

Comments are closed.