svg.resize.js

An extension of svg.js which allows to resize elements which are selected with svg.select.js

Demo

For a demo see http://svgdotjs.github.io/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:

<link rel="stylesheet" href="https://unpkg.com/@svgdotjs/svg.resize.js@latest/dist/svg.resize.css" />
<script src="https://unpkg.com/@svgdotjs/svg.js"></script>
<!-- the select plugin comes bundled with the resize plugin -->
<!-- <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