1

How to create a line/path between two objects. Start and end point of path/line should not begin/end at the center of the respective object. Below i'm attaching the screenshot of sample. I need to calculate the logic to find the red line at any position. Black line is wrong one.

enter image description here

And it is purely based on SVG not html elements.

Thanks in advance

Vijay Baskaran
  • 869
  • 2
  • 9
  • 18
  • You don't need to do this for svg, just change objects order. I'm use [raphael.js](http://dmitrybaranovskiy.github.io/raphael/) for rule svg. It have functions `el.insertAfter(); el.insertBefore(); el.toBack(); el.toFront();` for control objects order. – imbearr Sep 29 '16 at 08:01
  • Thanks @imbearr. Is there any way to do without any library.? – Vijay Baskaran Sep 29 '16 at 08:05
  • Just readd/append the ones you want at the front to its parent I think (eg obj 1 & 3), that will place them later in the DOM, so the line will appear behind those objects. – Ian Sep 29 '16 at 08:33
  • @lan Thanks for your idea. But the problem was i need to implement arrow at the end of the red line using svg marker. in that case this idea wont work. :( – Vijay Baskaran Sep 29 '16 at 08:42
  • @VijayBaskaran, you need to found intersection point of two lines. There you can use [math](https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection) or raphael js library function `Raphael.pathIntersection(first_path,second_path)`. – imbearr Sep 29 '16 at 13:44

1 Answers1

-1

I found the solution without using any library based on the given below URL's.

URL 1: How to find the intersection point between a line and rectangel

URL 2: Calculating the intersection of two lines

Community
  • 1
  • 1
Vijay Baskaran
  • 869
  • 2
  • 9
  • 18