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
  });
});

附：由于某种原因，选择框在小提琴中不可见，但在 chrome 中是可见的，请随意使用 .nu-selection-box 类对其进行样式设置。