svg.js: выделять элементы мышью

Question

svg.js: выделять элементы мышью

1

Я использую 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, но он не выполняет эту работу.

Может ли кто-нибудь указать мне в правильном направлении? Есть ли какая-то функциональность, уже существующая или мне нужно ее реализовать с нуля?

Простая скрипка здесь.

adrian 08 фев. 2018, в 22:41

Источник

0

было бы возможно для вас сделать jsfiddle jsfiddle.net
Alexander Solonik 08 фев. 2018, в 20:50
0

Да, я подготовил скрипку здесь: jsfiddle.net/zgokwdqL
adrian 08 фев. 2018, в 21:17

Теги:

javascript

svg

svg.js

1 ответ

Ещё вопросы

было бы возможно для вас сделать jsfiddle jsfiddle.net
Да, я подготовил скрипку здесь: jsfiddle.net/zgokwdqL

Alexander Solonik · Accepted Answer · 2018-02-08T19-46-00.000Z

Найден плагин под названием 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
  });
});

PS Поле выбора по какой-то причине не видно в скрипке, но в хром видно, не стесняйтесь стилизовать его, используя класс .nu-selection-box.

Спасибо за ответ, но, к сожалению, он не работает для моего варианта использования. У меня нет нескольких элементов SVG, у меня есть только один, и я хочу выделить полигоны внутри.