svg.connectable.js

A JavaScript library for connecting SVG things.


CDN

The library is available on CDNJS as well. To use it, just do:

``html

`

Usage

This library depends on:

- SVG.js
- svg.draggy.js

`html








`

This Demo in jsfiddle: https://jsfiddle.net/u8qck0h3/

Documentation

$3

Connects two elements. If called multiple times, the lines will be curved.

#### Params

- Object options: An object containing the following fields:
- container (SVGElement): The line elements container.
- markers (SVGElement): The marker elements container.
- padEllipse (Boolean): If true, the line coordinates will be placed with a padding.
- SVGElement elmTarget: The target SVG element.

#### Return
- 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.
- computeLineCoordinates (Function)
- update (Function)
- setLineColor (Function)

$3

The function that computes the new coordinates.
It can be overriden with a custom function.

#### Params

- Connectable con: The connectable instance.

#### Return
- Object An object containing the x1, x2, y1 and y2 coordinates.

$3

Updates the line coordinates.

$3

Sets the line color.

#### Params

- String color: The new color.
- Connectable c`: The connectable instance.

How to contribute

Have an idea? Found a bug? See [how to contribute][contributing].

License

See the LICENSE file.

[contributing]: /CONTRIBUTING.md
[docs]: /DOCUMENTATION.md