Connect html elements with SVG path

Developer
Mirjamsk
Size
4,232 Kb
Views
4,048
  1. Connect html elements with SVG path Previews
  2. Connect html elements with SVG path HTML Codes
  3. Connect html elements with SVG path CSS Codes
  4. Connect html elements with SVG path JS Codes

How do I make an connect html elements with svg path?

Connections redraw on screen resize contains a javaScript file for connecting any two html elements with an SVG path in a pipe-like fashion.. What is a connect html elements with svg path? How do you make a connect html elements with svg path? This script and codes were developed by Mirjamsk on 26 January 2023, Thursday.

Connect html elements with SVG path Previews
IQ Test

Connect html elements with SVG path - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>connect html elements with SVG path</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="svgContainer"> <svg id="svg1" width="0" height="0" > <path id="path1"/> <path id="path2"/> <path id="path3"/> <path id="path4"/> <path id="path5"/> <path id="path6"/> </svg>
</div>
<div id= "outer"> <div id="teal"></div> <div id="red"></div> <div id="green"></div> <div id="purple"></div> <div id="orange"></div> <div id="aqua"></div>
</div>
<!-- Try to resize the screen -->
<!-- the connections should hold --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Connect html elements with SVG path - Script Codes CSS Codes

body{font-size: 1.5vh; }
div{ opacity: 0.7; }
#svgContainer { z-index: -10; opacity: 0.5; margin: 2.5em 2.5em; position: absolute; background-color: #999;
}
path { fill: none; stroke: #000; stroke-width: 0.7em;
}
#path3 {stroke-width: 0.5em;}
#path5 {stroke-width: 0.8em;}
#path6 {stroke-width: 0.8em;}
#outer{ width: 80%; margin: 0 auto;
}
#teal{ width: 6em; height: 6em; margin-left: 10%; background-color: teal;
}
#orange{ width: 35%; height: 4em; padding: 2em 8em; margin-top: 6em; margin-left: 8em; background-color: orange;
}
#red{ width: 6em; height: 4em; padding: 4em 3em; margin-left: 30%; background-color: red;
}
#aqua{	width: 5em;	height: 5em;	margin-left: 15%;	background-color: aqua;
}
#purple{	width: 15em;	height: 5em;	background-color:purple;
}
#green{	width: 5em;	height: 7em;	margin-top: 2em;	margin-left: 50%;	background-color: green;
}

Connect html elements with SVG path - Script Codes JS Codes

//helper functions, it turned out chrome doesn't support Math.sgn()
function signum(x) { return (x < 0) ? -1 : 1;
}
function absolute(x) { return (x < 0) ? -x : x;
}
function drawPath(svg, path, startX, startY, endX, endY) { // get the path's stroke width (if one wanted to be really precize, one could use half the stroke size) var stroke = parseFloat(path.css("stroke-width")); // check if the svg is big enough to draw the path, if not, set heigh/width if (svg.attr("height") < endY) svg.attr("height", endY); if (svg.attr("width" ) < (startX + stroke) ) svg.attr("width", (startX + stroke)); if (svg.attr("width" ) < (endX + stroke) ) svg.attr("width", (endX + stroke)); var deltaX = (endX - startX) * 0.15; var deltaY = (endY - startY) * 0.15; // for further calculations which ever is the shortest distance var delta = deltaY < absolute(deltaX) ? deltaY : absolute(deltaX); // set sweep-flag (counter/clock-wise) // if start element is closer to the left edge, // draw the first arc counter-clockwise, and the second one clock-wise var arc1 = 0; var arc2 = 1; if (startX > endX) { arc1 = 1; arc2 = 0; } // draw tha pipe-like path // 1. move a bit down, 2. arch, 3. move a bit to the right, 4.arch, 5. move down to the end path.attr("d", "M" + startX + " " + startY + " V" + (startY + delta) + " A" + delta + " " + delta + " 0 0 " + arc1 + " " + (startX + delta*signum(deltaX)) + " " + (startY + 2*delta) + " H" + (endX - delta*signum(deltaX)) + " A" + delta + " " + delta + " 0 0 " + arc2 + " " + endX + " " + (startY + 3*delta) + " V" + endY );
}
function connectElements(svg, path, startElem, endElem) { var svgContainer= $("#svgContainer"); // if first element is lower than the second, swap! if(startElem.offset().top > endElem.offset().top){ var temp = startElem; startElem = endElem; endElem = temp; } // get (top, left) corner coordinates of the svg container var svgTop = svgContainer.offset().top; var svgLeft = svgContainer.offset().left; // get (top, left) coordinates for the two elements var startCoord = startElem.offset(); var endCoord = endElem.offset(); // calculate path's start (x,y) coords // we want the x coordinate to visually result in the element's mid point var startX = startCoord.left + 0.5*startElem.outerWidth() - svgLeft; // x = left offset + 0.5*width - svg's left offset var startY = startCoord.top + startElem.outerHeight() - svgTop; // y = top offset + height - svg's top offset // calculate path's end (x,y) coords var endX = endCoord.left + 0.5*endElem.outerWidth() - svgLeft; var endY = endCoord.top - svgTop; // call function for drawing the path drawPath(svg, path, startX, startY, endX, endY);
}
function resetSVGsize(){ $("#svg1").attr("height", "0"); $("#svg1").attr("width", "0");
}
function connectAll() { // connect all the paths you want! connectElements($("#svg1"), $("#path1"), $("#teal"), $("#orange")); connectElements($("#svg1"), $("#path2"), $("#red"), $("#orange")); connectElements($("#svg1"), $("#path3"), $("#teal"), $("#aqua") ); connectElements($("#svg1"), $("#path4"), $("#red"), $("#aqua") ); connectElements($("#svg1"), $("#path5"), $("#purple"), $("#teal") ); connectElements($("#svg1"), $("#path6"), $("#orange"), $("#green") );
}
var i = -15;
function quick_demo(){ i += 0.2; var outerW = parseInt($("#outer").css('width')); $("#outer").css({'width': outerW+i}); resetSVGsize(); connectAll(); if (i<14.7) requestAnimationFrame(quick_demo); else $("#outer").css({'width': ''});
}
$(document).ready(function() { // reset svg each time resetSVGsize(); connectAll(); // resize simulation demo, comment it out to make it stop quick_demo();
});
$(window).resize(function () { // reset svg each time resetSVGsize(); connectAll();
});
Connect html elements with SVG path - Script Codes
Connect html elements with SVG path - Script Codes
Home Page Home
Developer Mirjamsk
Username alojzije
Uploaded January 26, 2023
Rating 4
Size 4,232 Kb
Views 4,048
Do you need developer help for Connect html elements with SVG path?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mirjamsk (alojzije) Script Codes
Name
Materialize pagination
Horizontal slider on scroll
Horizontal slider
Visualize DNA using chaos game
Gravity simulation
Search it
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!