How to connect two elements in a SVG tag?

Question

I have a central SVG tag in which multiple elements such as rect, circle etc are being drawn dynamically. How can I connect those two.

I tried using jsPlumb but this page at jsPlumb blog states that

THE PROBLEM You cannot connect two rect elements (or any SVG shapes) directly. This is because the shapes inside an SVG element do not have the same positioning information as all other DOM elements. So now consider you have this markup:

I have been researching since two days to look for a way but all libraries either connect two DIVs together or two SVG tags together. Is there a way to connect SVG ELEMENTS together?

Answer 1

I think a solution is described in your link (in "THE SOLUTION" section). You need to define the way to compute the offset for each shape, and then override some jsPlumb methods (getOffset and getSize).

Then, you'll be able to use JSplumb to connect the rectangles.