Redimensioner du SVG avec javascript et jquery

Salut à tous,

J'ai un projet (une maquette pour l'instant) basée sur PHP (Symfony 2) et javascript (jQuery).

Dans cette future application je dois dessiner des schémas a partir de données, le schema doit servir d'interface permettant de modifier les données...

Pour des raisons de souplesses au niveau du dessin j'ai décider de créer les schéma en SVG.

Le schéma de déroulement d'un écran est :

1. création de la page web
2. récupération ajax des lignes a traiter
3. dessin des différents schemas (un par ligne)(création des dessins en javascript)
4. si modification du dessin à la souris et validation, renvoie des données en ajax.

La partie récupération, dessins et envoie des données ne me pose (a priori) pas de problèmes. Par contre, la modification du dessin, c'est moins clair. J'ai trouvé beaucoup de code exemple pour montrer comment le faire, mais certain de plus de 5 ans :? et toujours un peu obscure.

J'ai fais un schéma du schéma :mouarf: que vous trouverez en pièce jointe.

jQuery aura en mémoire le tableau permettant de tracer chaque schema. Donc toute les données pour le retracer si nécessaire. Tous les déplacements ne se font que sur l'axe horizontal, le shema ne ce déplace pas de bas en haut.

Quels événements capturer pour modifier les dimensions ?
Dois-je créer un rectangle invisible à la jonction de deux rectangles (ex le vert et le rose) pou faciliter la "prise" du lien ?

Je ne suis pas un cador en développement avec javascript, je sais faire des interactions simples avec jQuery dans un form pour afficher des zones ou récupérer, envoyer des données au serveur. La partie graphique est une découverte dans la douleur d'un nouveau monde...