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/

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

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