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
- Select a rectangle using this simple piece of code:
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 specify which points to be drawn (default all will be drawn)
The list can be an array of strings or a comma separated list / string, representing each position, in correspondence with the classes:
*
lt - left top
*
rt - right top
*
rb - right bottom
*
lb - left bottom
*
t - top
*
r - right
*
b - bottom
*
l - left
Example of drawing only
top and
right points:
rect.selectize({
points: ['t', 'r'] // or 't, r'
})
There is also an extra option called
pointsExclude which can be a list of points to be excluded from the
points list.
So let's say that you need all the points except
top and
right:
rect.selectize({
pointsExclude: ['t', 'r'] // or 't, r'
})
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
['lt', 'rt', 'rb', 'lb', 't', 'r', 'b', 'l'])
- pointsExclude: Same as points option, only thing that this excludes listed points, you can use (default
[])
- classRect: Classname of the rect from the bounding Box (default
svg_select_boundingRect)
- classPoints: Classname/Prefix of the Points (default
svg_select_points)
- pointSize: Size of the point. Radius for the
pointType: 'circle' or size of a rect for
pointType: 'rect' (default
7)
- rotationPoint: Draws the point for doing rotation (default
true)
- deepSelect: Only for polygon/polyline/line. Selects the points itself (default
false)
- pointType: Type of a point,
circle or
rect or function (see functions for drawing
circle or
rect points) (default
circle)