Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/svgdotjs/svg.resize.js below:

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

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

For a demo see http://svgdotjs.github.io/svg.resize.js/

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()

Activate resizing

Deactivate resizing

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

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

• 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

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)
})

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4