Constructs a empty and uninitialized SVGManager object
The actual SVG element on the DOM
Fetch the events defined on the node
The id connected to this SVGManager, also set as the DOM-id for the SVG element
Fetch the tags set on the node
Animates the node using an SVGAnimate object
Adds a class to a SVGNode
Removes the rendered items, definitions, events and innerText
Creates a deepcopy from current SVGNode
Setter for the cx attribute
Setter for the cy attribute
Adds the definition of element to list of definitions, So that next time, when it is used, the element can rendered using the definition.
This will be used in renderDef, SVGNode.fillDef and SVGNode.strokeDef
Will remove the element from the DOM and deactivate this variable
Checks deeply whether two nodes are equal
Shortcut for setting fill attributes
Shortcut for setting fill attributes to a definition (See more at SVGManager.define)
Setter for the height attribute
Initialize the SVGManager
container-id in which to put the SVG
Mutates the SVGNode to change an attribute attr by putting its value through the function f. Then, it returns itself, for easy programming.
If the attribute was not set, the call still succeeds but does nothing.
Setter for the r attribute
Renders a figure to the SVG using a SVGNode
Renders a figure to the SVG using a definition string.
Requires a definition to present for the figure ID otherwise it throws a Error
Definition id string
Optional arguments from the rendering, including the tags, attributes and events
Checks shallowly whether two nodes are equal
Shortcut for setting stroke attributes
Shortcut for setting stroke attributes to a definition (See more at SVGManager.define)
Returns the JS SVGElement equavalent of current SVGNode
Returns the hashstring of SVGNode
Removes tag from node, if it does not exist it does nothing.
Setter for the viewBox attribute
Setter for the width attribute
Setter for the x attribute
Setter for the y attribute
Generated using TypeDoc
A manager class for interactive SVG's
Initializing
<!-- Rest of DOM... --> <div id="svg-root"> <!-- Here the SVG will be inserted --> </div> <!-- Rest of DOM... -->import { SVGManager } from 'ts-svgmanager' // This will initialize a interactive SVG in the container const manager = new SVGManager().init('svg-root')Examples
Example 1 - Rendering a circle
import { SVGManager } from 'ts-svgmanager' import ViewBox from 'ts-svgmanager/helpers/ViewBox' import { circle } from 'ts-svgmanager/Shapes' // Initializing the SVGManager with a viewBox of '-30 -30 60 60' const manager = new SVGManager() .init('svg-root') .viewBox(new ViewBox(-30, -30, 60, 60)) // Rendering a circle with a radius of 20 at (0,0) manager.render(circle(20))Example 2 - Rendering a custom cursor
import { SVGManager } from 'ts-svgmanager' import ViewBox from 'ts-svgmanager/helpers/ViewBox' import { circle } from 'ts-svgmanager/Shapes' // Initializing the SVGManager with a viewBox of '-30 -30 60 60' const manager = new SVGManager() .init('svg-root') .viewBox(new ViewBox(0, 0, 200, 200)) .width(200) .height(200) .set('cursor', 'none') // Remove the normal cursor // Rendering a circle with a radius of 10 at (0,0) manager.render(circle(10).tag('custom-cursor')) // Adding the onmousemove listener manager.on('mousemove', (ev: MouseEvent, svgNode) => { // Get the position of the SVG element const svgX = svgNode.element.getBoundingClientRect().x, svgY = svgNode.element.getBoundingClientRect().y // Get the x and y of the mouse relative to the SVG const x = ev.clientX - svgX, y = ev.clientY - svgY // Move the cursor to this location manager.tagged('custom-cursor').forEach((cursor) => cursor.cx(x).cy(y)) })