Generate SVG-based Arrows Between Components – jQuery arrows.js

arrows.js is a straightforward jQuery plugin that generates styleable SVG arrows together with accompanying textual content tags between HTML components in your webpage.

It’s designed to create a visible connection that helps illustrate relationships, hierarchies or sequences between the linked UI parts. Beliefs for infographics, flowcharts, interactive tutorials, and extra.

See Additionally:

Easy methods to use it:

1. Obtain the plugin and cargo the jquery.arrows.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.arrows.js"></script>

2. Initialize the plugin and specify the origin and vacation spot components.

$().arrows({
  from: '#node-from', 
  to: '#node-to'
});

3. Add customized textual content to the SVG arrow.

$().arrows({
  from: '#node-from', 
  to: '#node-to',
  identify: 'i'm an arrow',
});

4. Assign a singular ID and/or CSS class(es) to the arrow. OPTIONAL.

$().arrows({
  from: '#node-from', 
  to: '#node-to',
  id: 'arrow-id', 
  class: 'arrow-class',
});

5. Specify the container that maintain the SVG arrows.

$().arrows({
  from: '#node-from', 
  to: '#node-to',
  inside: '#container',
});

6. Specify the tab identify of the SVG arrows.

$().arrows({
  from: '#node-from', 
  to: '#node-to',
  tag: 'arrow',
});

7. API strategies.

// take away arrows
$('.take away').arrows('take away');

// update arrows
$('.replace').arrows('replace');

This superior jQuery plugin is developed by alejp1998. For extra Superior Usages, please test the demo web page or go to the official web site.