Ich muss etwas in der Art von tundiese, aber ich mit Snap.svg und mit der Fähigkeit:

Ziehen Sie die gesamte Gruppe entlang des PfadsAbstand beim Ziehen beibehaltenZulassen, dass Gruppen von einem beliebigen Gruppenelement gezogen werdenUnterstützt eine beliebige Anzahl von GruppenelementenUnterstützen Sie unterschiedlich geformte Pfade

Ich habe begonnendiese Geige als funktionierender Ausgangspunkt (und auch unten veröffentlicht), aber ich bin ratlos, wie ich das Problem am besten angehen kann.

var paper = Snap('#panel');

var path = paper.path('M44.16,44.16 L44.16,44.16 L73.6,14.719999999999999 L132.48,73.6 L14.719999999999999,191.35999999999999 L132.48,309.12 L103.03999999999999,338.55999999999995 L44.16,279.67999999999995 L44.16,279.67999999999995')
.attr({
    stroke: 'gray',
    strokeWidth: 3,
    fill: 'none'
});

var c1 = paper.circle(103.03999999999999, 103.03999999999999, 15);
var c2 = paper.circle(44.16, 161.92, 15);
var c3 = paper.circle(73.6, 132.48, 15);

var cGroup = paper.g();
cGroup.add(c1,c2,c3);