Skip to content

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

License

Notifications You must be signed in to change notification settings

svgdotjs/svg.resize.js

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published