svg.js：使用鼠标选择元素

Question

I am using svg.js to draw a svg with several boxes like this:

The SVG contents look like this:

<g id="1">
  <title>Box 1</title>
  <polygon id="target_1" fill="#fdb8d4" points="70 10 100 10 100 40 70 40"/>
</g>

I'd like to select one or multiple boxes on mouse down, move and release, eg like visualized in this image:

I found the select plugin for svg.js, but it seams not to do the job.

Can someone point me into the right direction? Is there some functionality already existing or do i need to implement it from scratch?

Simple fiddle here .

Answer 1

Found a plugin called nuSelectable .

You can use it like so JSFIDDLE

<div class="svgContainer">
  <svg height="150" width="150" class="item">
    <circle cx="60" cy="60" r="50" style="fill: blue; stroke: black; stroke-width: 2px;" />
  </svg>
  <svg height="150" width="150" class="item">
    <circle cx="60" cy="60" r="50" style="fill: blue; stroke: black; stroke-width: 2px;" />
  </svg>
</div>

JS initialization code:

$(function() {
  $('.svgContainer').nuSelectable({
    items: '.item',
    selectionClass: 'nu-selection-box',
    selectedClass: 'nu-selected',
    autoRefresh: true
  });
});

PS The selection box for some reason is not visible in the fiddle, but in chrome is visible, feel free to style it using the class .nu-selection-box .