Я использую 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, но он не выполняет эту работу.
Может ли кто-нибудь указать мне в правильном направлении? Есть ли какая-то функциональность, уже существующая или мне нужно ее реализовать с нуля?
Простая скрипка здесь.
Найден плагин под названием 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
.