jQuery Plugin To Connect HTML Elements with Lines - HTML SVG Connect

jQuery Plugin To Connect HTML Elements with Lines - HTML SVG Connect

Just another jQuery plugin for visualizing the connection between two block elements with an elegant, customizable, responsive SVG line.

See also:

How to use it:

1. Make sure both the jQuery HTML SVG Connect and jQuery JavaScript library are included on the webpage.

<script src="jquery.min.js"></script>
<script src="jquery.html-svg-connect.js"></script>

2. Call the plugin on the element containing the block elements you want to connect with a SVG path.

<div id="svgContainer"></div>
<div id="el-a"></div>
<div id="el-b"></div>
  paths: [
    { start: "#el-1", end: "#el2"}

3. Options with default values. You can override any of these values during initialization.

// color of the SVG line
stroke: "#000000",
// thickness in px of the SVG line
strokeWidth: 12,
// Whether the path begins/ends from the side of the element or from the top/bottom.
// horizontal | vertical | auto
orientation: "auto",
// Array of objects with properties "start" & "end" that
// define the selectors of the elements to connect:
// i.e., {start: "#purple", end: "#green"}.
// Optional properties:
//  "stroke": [color],
//  "strokeWidth": [px],
//  "orientation": [horizontal|vertical|auto (default)]
paths: []

Change log:


  • Small re-ordering of lines.


  • Updated addPaths to use map function


  • Draw paths for dynamic content

This awesome jQuery plugin is developed by a115. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 10.06.2018
  • Source