svg

SVG manipulation utilities for creating connections, diagrams, and converting elements to SVG format.

Functions

Function
Description
Example

init

Initialize SVG connection between elements

dphelper.svg.init(container, [el1, 'right'], [el2, 'left'])

check

Check SVG browser support

dphelper.svg.check()

update

Update SVG connection positions

dphelper.svg.update(rect1, rect2, path)

getCurve

Calculate curve path between points

dphelper.svg.getCurve([x1,y1], [x2,y2], distance)

getIntersection

Calculate element intersection point

dphelper.svg.getIntersection(dx, dy, cx, cy, w, h)

setConnector

Set connector point on element

dphelper.svg.setConnector(element, 'right')

removeConnection

Remove SVG connection from container

dphelper.svg.removeConnection(container)

makeScrollable

Update connection on scroll

dphelper.svg.makeScrollable(svg, scroll, el1, el2, rect1, rect2)

makeDraggable

Make SVG element draggable

dphelper.svg.makeDraggable(event)

toggle

Toggle SVG connection on/off

dphelper.svg.toggle(event, container, el1, el2)

convert

Convert HTML element to SVG

dphelper.svg.convert({ children: '#myDiv' })

Description

Complete SVG toolkit:

  • Connection Drawing - Create visual links between elements

  • Geometry Calculations - Curves, intersections, positions

  • Interactivity - Draggable elements, scroll handling

  • Conversion - Transform HTML to SVG

Usage Examples

Creating Connections

Connection Sides

Toggle Connection

HTML to SVG Conversion

Check SVG Support

Remove Connections

Advanced Usage

Flowchart Builder

Draggable SVG Elements

Details

  • Author: Dario Passariello

  • Version: 0.0.2

  • Creation Date: 20210101

  • Last Modified: 20260220

  • Environment: Client-side only (browser)


Automatically generated document

Last updated