Easy Creation And Manipulation Of SVG Elements – SVG.js

Preview:

Description:

SVG.js is a tiny JavaScript library that makes it easier to create and manipulate SVG elements within the document.

How to use it:

1. Download and load the SVG.js library in the document.

<script src="./lib/svg.js"></script>

2. Create a new SVG object and insert it into an element you specify.

<div id="app"></div>

const svg = SVG('#app');

3. Append new elements & attributes to the SVG node. In this example, we’re going to create an SVG square with a smooth scale animation.

svg.$()
  .attr('width', 500)
  .attr('height', 500)
  .append('g')
  .attr('transform', 'scale(1, 1)')
  .attr('transform', { type: 'scale', start: {x: 0, y: 0}, stop: {x: 5, y: 5}, duration: 2000, frequency: 100 })
  .append('rect')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', 50)
  .attr('height', 50)

4. Manipulate the SVG element with the following API.

// Returns a reference to this SVG object.
SVG.noConflict();
// Converts a SVG transform attributes string to an object.
SVG.transformAttrToObj(transform);
// Converts a SVG transform attributes string to an string.
SVG.transformAttrToStr(transform);
// Draws an arc path.
draw.getArc(startAngle, stopAngle, outerRadius, innerRadius);
// Draws polyline paths
// shape: a set of array of points (x, y) defining  the polygonal line
// closed: true if it is a polygon
draw.getMultipolyline(shape, closed);

5. Public Chaining Methods.

• firstParent: moves to the svg node
• parent: moves to the parent
• previous: selects the previous sibbling element
• next: selects the next sibbling element
• select: selects an SVG element
• append: appends an SVG element and selects it
• appendBefore: appends a new SVG el. before the reference SVG el.
• appendAfter: appends a new SVG el. after the reference SVG el.
• appendHTML: appends a foreignObject to svg and selects it
• replace: replaces the current SVG element
• remove: removes the given SVG element
• removeChild: removes the passed-in child element
• replaceChild: replaces a child by another
• removeAllChilds: removes all the childs from the selected element
• empty: removes all the childs from the selected element
• listen: attaches an event listener to the SVG element
• listenOnce: attaches a fired once event listener to the SVG element
• unlisten: removes an event listener to the SVG element
• alink: adds a link attribute to the SVG selected element
• attr: adds attributes to the selected SVG element
• rmattr: removes the given attribute from the selected SVG element
• text: adds text to the selected SVG element
• addClass: adds a class value to the selected SVG element
• removeClass: removes a class value to the selected SVG element
• toggleClass: toggles a class value to the selected SVG element

6.  Non Chaining public methods.

• query: returns the first matching element or null
• getElement: returns the selected SVG element
• children: returns the children HTMLCollection
• getAttribute: returns the attribute value
• getComputedStyle: returns the style applied to this element
• getPropertyValue: returns the value of the specified property
• getSize: returns the width and height of this element
• getBbox: returns the bounding boxes

Changelog:

v1.0.1 (01/31/2022)

• update

v0.1.0 (08/10/2020)

• Updated the project with the boilerplate ES6Kadoo
• First release candidate
• Updated the project template
• Release

04/11/2020

• v0.0.5

12/30/2019

• v0.0.3