svg.select.js

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

Demo

For a demo see http://svgjs.dev/svg.resize.js/ or run pnpm demo, which starts a vite dev server with the demo from demo/.

Get Started

• Install svg.js and svg.select.js using npm:

  npm i @svgdotjs/svg.js @svgdotjs/svg.select.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>

• Select a rectangle using this simple piece of code:

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

Usage

Select

var canvas = SVG().addTo('body')
var rect = canvas.rect(100, 100)
var polygon = canvas.polygon([
  [100, 100],
  [200, 100],
  [200, 200],
  [100, 200]
])
rect.select()
polygon.pointSelect()

// both also works
polygon.select().pointSelect()

Unselect

rect.select(false)

Adaptation

Sometimes, the default shape is not to your liking. Therefore, you can create your own handles by passing in a create and update function:

rect.select({
  createHandle: (group, p, index, pointArr, handleName) =>
    group.circle(10).css({ stroke: '#666', fill: 'blue' }),
  updateHandle: (group, p, index, pointArr, handleName) =>
    group.center(p[0], p[1]),
  createRot: (group) => group.circle(10).css({ stroke: '#666', fill: 'blue' }),
  updateRot: (group, rotPoint, handlePoints) => group.center(p[0], p[1])
})

polygon.pointSelect({
  createHandle: (group, p, index, pointArr, handleName) =>
    group.circle(10).css({ stroke: '#666', fill: 'blue' }),
  updateHandle: (group, p, index, pointArr, handleName) =>
    group.center(p[0], p[1])
})

Selecting handles

By default, all resize handles (lt, t, rt, r, rb, b, lb, l) and the rotation handle (rot) are shown. Pass an explicit handles array to render only those:

// resize-only selection (corners)
rect.select({ handles: ['lt', 'rt', 'rb', 'lb'] })

// rotate-only selection
rect.select({ handles: ['rot'] })

You can style the selection with the classes

• svg_select_shape - normal selection
• svg_select_shape_pointSelection - point selection
• svg_select_handle- any normal selection handles
• svg_select_handle_lt - left top
• svg_select_handle_rt - right top
• svg_select_handle_rb - right bottom
• svg_select_handle_lb - left bottom
• svg_select_handle_t - top
• svg_select_handle_r - right
• svg_select_handle_b - bottom
• svg_select_handle_l - left
• svg_select_handle_rot - rotation point
• svg_select_handle_point - point select point

Contributing

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

Migration from svg.js v2

• The css classes changed. In case you used your own styling, you'll need to adapt
• A lot of options got dropped in favor of the create and update functions
  • In case you want to hide certain handles, just create an element without any size and pass a noop to update
• the deepSelect option was moved to its own function and renamed to pointSelect