svg.select.js

What is svg.select.js?

The svg.select.js npm package is a plugin for the SVG.js library that allows for easy selection and manipulation of SVG elements. It provides functionalities for selecting, resizing, and dragging SVG elements, making it useful for creating interactive graphics and diagrams.

What are svg.select.js's main functionalities?

Selection

This feature allows you to make SVG elements selectable. The code sample demonstrates how to create a rectangle and make it selectable using the `selectize` method.

const draw = SVG().addTo('body').size(300, 300);
const rect = draw.rect(100, 100).attr({ fill: '#f06' });
rect.selectize();

Resizing

This feature enables resizing of SVG elements. The code sample shows how to create a rectangle, make it selectable, and then enable resizing using the `resize` method.

const draw = SVG().addTo('body').size(300, 300);
const rect = draw.rect(100, 100).attr({ fill: '#f06' });
rect.selectize().resize();

Dragging

This feature allows for dragging of SVG elements. The code sample demonstrates how to create a rectangle, make it selectable, and then enable dragging using the `draggable` method.

const draw = SVG().addTo('body').size(300, 300);
const rect = draw.rect(100, 100).attr({ fill: '#f06' });
rect.selectize().draggable();

Other packages similar to svg.select.js

svg.js

SVG.js is a lightweight library for manipulating and animating SVG. It provides a wide range of functionalities for creating and interacting with SVG elements. While svg.select.js is a plugin specifically for selection and manipulation, SVG.js offers a broader set of tools for SVG manipulation.

d3-selection

D3-selection is a module of the D3.js library that provides methods for selecting and manipulating DOM elements, including SVG elements. It offers more general selection and manipulation capabilities compared to svg.select.js, which is more focused on interactive SVG element manipulation.

interact.js

Interact.js is a JavaScript library for drag-and-drop, resizing, and multi-touch gestures. It can be used with SVG elements to provide similar functionalities to svg.select.js, but it is more versatile and can be used with other types of elements as well.

README

svg.select.js

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

Note: Duo to naming conflicts the exported method was renamed from select() to selectize().

Demo

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

Get Started

• Install svg.select.js using bower:

    bower install svg.select.js
  

• Include the script after svg.js into your page

    <script src="svg.js"></script>
    <script src="svg.select.js"></script>
  

• Select a rectangle using this simple piece of code:

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

Usage

Select

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

// or deepSelect
rect.selectize({deepSelect:true});

Unselect

rect.selectize(false);

// or deepSelect
rect.selectize(false, {deepSelect:true});

You can style the selection with the classes

• svg_select_boundingRect
• svg_select_points
• svg_select_points_lt - left top
• svg_select_points_rt - right top
• svg_select_points_rb - right bottom
• svg_select_points_lb - left bottom
• svg_select_points_t - top
• svg_select_points_r - right
• svg_select_points_b - bottom
• svg_select_points_l - left
• svg_select_points_rot - rotation point
• svg_select_points_point - deepSelect points

Options

• points: Points should be drawn (default true)
• classRect: Classname of the rect from the bounding Box (default svg_select_boundingRect)
• classPoints: Classname/Prefix of the Points (default svg_select_points)
• radius: Radius of the points (default 7)
• rotationPoint: Draws the point for doing rotation (default true)
• deepSelect: Only for polygon/polyline/line. Selects the points itself (default false)