svg.resize.js ​

An extension of svg.js which allows to resize elements with mouse

Demo ​

For a demo see http://svgjs.dev/svg.resize.js/

Get Started ​

Install svg.js, svg.select.js and svg.resize.js using npm:

npm i @svgdotjs/svg.js @svgdotjs/svg.select.js @svgdotjs/svg.resize.js

Or get it from a cnd:

<script src="https://unpkg.com/@svgdotjs/svg.js"></script>
<script src="https://unpkg.com/@svgdotjs/svg.select.js"></script>
<script src="https://unpkg.com/@svgdotjs/svg.resize.js"></script>

Select and resize a rectangle using this simple piece of code:

var canvas = new SVG().addTo("body").size(500, 500);
canvas.rect(50, 50).fill("red").select().resize();

Usage ​

Activate resizing

rect.select().resize();

Deactivate resizing

rect.resize(false);

Preserve aspect ratio, resize around center and snap to grid:

rect.resize({
  preserveAspectRatio: true,
  aroundCenter: true,
  grid: 10,
  degree: 0.1,
});

Options ​

• preserveAspectRatio: Preserve the aspect ratio of the element while resizing
• aroundCenter: Resize around the center of the element
• grid: Snaps the shape to a virtual grid while resizing
• degree: Snaps to an angle when rotating

Events ​

While resizing, a resize event is fired. It contains the following properties (in event.detail):

• box: The resulting bounding box after the resize operation
• angle: The resulting rotation angle after the resize operation
• eventType: The type of resize operation (the event fired by the select plugin)
• event: The original event
• handler: The resize handler

rect.on("resize", (event) => {
  console.log(event.detail);
});

Contributing ​

git clone https://github.com/svgdotjs/svg.resize.js.git
cd svg.resize.js
npm install
npm run dev

Migration from svg.js v2 ​

• The option naming changed a bit. Please double check
• The former events were removed. The resize event now serves the same purpose