svg.js: select 个鼠标元素

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 鼠标按下、移动和释放一个或多个框，例如就像这张图片中显示的那样：

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

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

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

P.S。由于某种原因，选择框在 fiddle 中不可见，但在 chrome 中可见，请随意使用 class .nu-selection-box.

对其进行样式设置

svg.js: select 个鼠标元素

svg.js: select elements with mouse

javascript

svg

svg.js