mahiya/connectWithInlineSVG.html

## connectWithInlineSVG.html
<!DOCTYPE html>
<html>
	<head>
		<style>
			html, body, svg{
				height: 100%;
				width: 100%;
			}
			.element {
				position: absolute;
				width: 100px;
				height: 100px;
				background: blue;
			}
			#element1 {
				top: 100px;
				left: 100px;
			}
			#element2 {
				top: 50px;
				left: 300px;
			}
			svg{
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>

		<div id="element1" class="element"></div>
		<div id="element2" class="element"></div>
		<svg id="svg"></svg>

		<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script>
			$(function() {
				var src = $("#element1").point().right;
				var dest = $("#element2").point().left;
				addPath(src, dest);
			});

			$.fn.extend({
				point : function() {
					return {
						top : {
							x : $(this).offset().left + $(this).width() / 2,
							y : $(this).offset().top,
						},
						bottom : {
							x : $(this).offset().left + $(this).width() / 2,
							y : $(this).offset().top + $(this).height(),
						},
						left : {
							x : $(this).offset().left,
							y : $(this).offset().top + $(this).height() / 2,
						},
						right : {
							x : $(this).offset().left + $(this).width(),
							y : $(this).offset().top + $(this).height() / 2,
						}
					}
				},
			});

	        function makeSVG(tag, attrs) {
	            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
	            for (var k in attrs)
	                el.setAttribute(k, attrs[k]);
	            return el;
	        }

			function addPath(src, dest) {
				var points = src.x + "," + src.y + " "
				+ (dest.x + src.x)/2 + ","+ src.y + " "
				+ (dest.x + src.x)/2 + "," + dest.y + " "
				+ dest.x + "," + dest.y;

		        var path = makeSVG('polyline', {points: points, stroke: "#000", "stroke-width": 1, fill: "none"});
		        document.getElementById('svg').appendChild(path);
			}
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	html, body, svg{
	height: 100%;
	width: 100%;
	}
	.element {
	position: absolute;
	width: 100px;
	height: 100px;
	background: blue;
	}
	#element1 {
	top: 100px;
	left: 100px;
	}
	#element2 {
	top: 50px;
	left: 300px;
	}
	svg{
	position: absolute;
	top: 0;
	left: 0;
	}
	</style>
	</head>
	<body>

	<div id="element1" class="element"></div>
	<div id="element2" class="element"></div>
	<svg id="svg"></svg>

	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script>
	$(function() {
	var src = $("#element1").point().right;
	var dest = $("#element2").point().left;
	addPath(src, dest);
	});

	$.fn.extend({
	point : function() {
	return {
	top : {
	x : $(this).offset().left + $(this).width() / 2,
	y : $(this).offset().top,
	},
	bottom : {
	x : $(this).offset().left + $(this).width() / 2,
	y : $(this).offset().top + $(this).height(),
	},
	left : {
	x : $(this).offset().left,
	y : $(this).offset().top + $(this).height() / 2,
	},
	right : {
	x : $(this).offset().left + $(this).width(),
	y : $(this).offset().top + $(this).height() / 2,
	}
	}
	},
	});

	function makeSVG(tag, attrs) {
	var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
	for (var k in attrs)
	el.setAttribute(k, attrs[k]);
	return el;
	}

	function addPath(src, dest) {
	var points = src.x + "," + src.y + " "
	+ (dest.x + src.x)/2 + ","+ src.y + " "
	+ (dest.x + src.x)/2 + "," + dest.y + " "
	+ dest.x + "," + dest.y;

	var path = makeSVG('polyline', {points: points, stroke: "#000", "stroke-width": 1, fill: "none"});
	document.getElementById('svg').appendChild(path);
	}
	</script>
	</body>
	</html>