svg.js：用鼠标选择元素

Question

我正在使用svg.js来绘制svg，其中有几个这样的框：

SVG内容如下所示：

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

我想在鼠标按下，移动和释放时选择一个或多个方框，例如如图中所示：

我为svg.js找到了select plugin，但是它找不到这个工作。

有人能指出我正确的方向吗？是否已存在某些功能，或者我是否需要从头开始实现它？

简单小提琴here。

Answer 1

找到一个名为nuSelectable的插件。

您可以像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初始化代码：

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

P.S。出于某种原因，选择框在小提琴中不可见，但在chrome中可见，可以使用类.nu-selection-box设置样式。