svg.resize.js

1.4.3 • Public • Published

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.resize.js using bower:

      bower install svg.resize.js
    
  • Include the script after svg.js and svg.select.js into your page

      <script src="svg.js"></script>
      <script src="svg.select.js"></script>
      <script src="svg.resize.js"></script>
    
  • Select a rectangle and make it resizeable:

      <div id="myDrawing"></div>
    
      var drawing = new SVG('myDrawing').size(500, 500);
      drawing.rect(50,50).selectize().resize()
    

Usage

Activate resizing

var draw = SVG('drawing');
var rect = draw.rect(100,100);
rect.selectize().resize();

Deactivate resizing

rect.resize('stop');

Keep element within constrained box

var draw = SVG('drawing');
var rect = draw.rect(100, 100);
var opt = {
	constraint: {
		minX: 0,
		minY: 0,
		maxX: 200,
		maxY: 300
	}
};
rect.selectize().resize(opt)

Options

  • snapToGrid: Snaps the shape to a virtual grid while resizing (default 1)
  • snapToAngle: Snaps to an angle when rotating (default 0.1)
  • constraint: Keep element within constrained box (see usage above); The box snaps to the grid defined by snapToGrid.
  • saveAspectRatio: Save aspect ratio of the element while resizing with left-top, left-bottom, right-top, right-bottom points.

Events

  • resizing: Fired when changes occur
  • resizedone: Fired when resizing is done

Known Issues

  • resize nested svgs does not work

/svg.resize.js/

    Package Sidebar

    Install

    npm i svg.resize.js

    Weekly Downloads

    867,532

    Version

    1.4.3

    License

    MIT

    Unpacked Size

    33 kB

    Total Files

    5

    Last publish

    Collaborators

    • fuzzyma