Joining lines with svgs was worth a shot for me, and it worked perfectly...
first of all, Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behaviors are defined in XML text files. you can create an svg in HTML using <svg>
tag. Adobe Illustrator is one of the best software used to create an complex svgs using paths.
Procedure to join two divs using a line :
create two divs and give them any position as you need
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
(for the sake of explanation I am doing some inline styling but it is always good to make a separate css file for styling)
<svg><line id="line1"/></svg>
Line tag allows us to draw a line between two specified points(x1,y1) and (x2,y2). (for a reference visit w3schools.) we haven't specified them yet. because we will be using jQuery to edit the attributes (x1,y1,x2,y2) of line tag.
in <script>
tag write
line1 = $('#line1');
div1 = $('#div1');
div2 = $('#div2');
I used selectors to select the two divs and line...
var pos1 = div1.position();
var pos2 = div2.position();
jQuery position()
method allows us to obtain the current position of an element. For more information, visit https://api.jquery.com/position/ (you can use offset()
method too)
Now as we have obtained all the positions we need we can draw line as follows...
line1
.attr('x1', pos1.left)
.attr('y1', pos1.top)
.attr('x2', pos2.left)
.attr('y2', pos2.top);
jQuery .attr()
method is used to change attributes of the selected element.
All we did in above line is we changed attributes of line from
x1 = 0
y1 = 0
x2 = 0
y2 = 0
to
x1 = pos1.left
y1 = pos1.top
x2 = pos2.left
y2 = pos2.top
as position()
returns two values, one 'left' and other 'top', we can easily access them using .top and .left using the objects (here pos1 and pos2) ...
Now line tag has two distinct co-ordinates to draw line between two points.
Tip: add event listeners as you need to divs
Tip: make sure you import jQuery library first before writing anything in script tag
After adding co-ordinates through JQuery ... It will look something like this
Following snippet is for demonstration purpose only, please follow steps above to get correct solution
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>_x000D_
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>_x000D_
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="50" stroke="red"/></svg>
_x000D_