javascript - 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>

我想在鼠标按下、移动和释放时选择一个或多个框，例如就像这张图片中所示的那样:

我找到了select plugin对于 svg.js，但它似乎无法完成这项工作。

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

简单的 fiddle 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
  });
});

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