A JavaScript library for connecting SVG things.
The library is available on CDNJS as well. To use it, just do:
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.connectable.js/1.1.0/svg.connectable.min.js"></script>
This library depends on:
- SVG.js
- svg.draggable.js (note this is the @jillix fork of the original svg.draggable.js project)
<script src="path/to/svg.js"></script>
<script src="path/to/svg.draggable.js"></script>
<script src="path/to/svg.connectable.js"></script>
<!-- Or from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.connectable.js/1.1.0/svg.connectable.min.js"></script>
-->
<div class="graph"></div>
<script>
var svg = new SVG(document.querySelector(".graph")).size("100%", 500);
var links = svg.group();
var markers = svg.group();
var nodes = svg.group();
var g1 = nodes.group().translate(300, 200).draggable();
g1.circle(80).fill("#C2185B");
var g2 = nodes.group().translate(100, 200).draggable();
g2.circle(50).fill("#E91E63");
var g3 = nodes.group().translate(200, 400).draggable();
g3.circle(100).fill("#FF5252");
g1.connectable({
container: links,
markers: markers
}, g2).setLineColor("#5D4037");
g2.connectable({
padEllipse: true
}, g3).setLineColor("#5D4037")
</script>
Connects two elements.
-
Object
options
: An object containing the following fields: -
container
(SVGElement): The line elements container. -
markers
(SVGElement): The marker elements container. -
SVGElement
elmTarget
: The target SVG element.
- Object The connectable object containing:
source
(SVGElement): The source element.target
(SVGElement): The target element.line
(SVGElement): The line element.marker
(SVGElement): The marker element.padEllipe
(Boolean): Iftrue
, the line coordinates will be placed with a padding.computeLineCoordinates
(Function)update
(Function)setLineColor
(Function)
The function that computes the new coordinates. It can be overriden with a custom function.
- Connectable
con
: The connectable instance.
- Object An object containing the
x1
,x2
,y1
andy2
coordinates.
Updates the line coordinates.
Sets the line color.
- String
color
: The new color. - Connectable
c
: The connectable instance.
- File an issue in the repository, using the bug tracker, describing the contribution you'd like to make. This will help us to get you started on the right foot.
- Fork the project in your account and create a new branch:
your-great-feature
. - Commit your changes in that branch.
- Open a pull request, and reference the initial issue in the pull request message.
See the LICENSE file.