@mobilabs/svg NPM

SVG

SVG is a tiny Javascript library intended to create and manage SVG elements in the DOM. SVG is designed to be embedded in another library. SVG is intended to run on ECMAScript 2015 (ES6) compliant browsers.

Quick Startup

You can create an SVG node inside a div by typing:

// SVG is built upon the prototypal pattern, you don't need the operator 'new'.
var svg = SVG('#svg');

If you have a look to the DOM, you will see:

<div id="svg">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
</div>

Then, you can fill your SVG node:

var svg = SVG('#svg');

// Append a rectangle:
svg
  .append('rect')
  .attr('x', 100)
  .attr('y', 100)
  .attr('width', 100)
  .attr('height', 100)
;

You get:

<div id="svg">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="100" y="100" width="100" height="100"></rect>
  </svg>
</div>

API

Static methods

SVG provides a set of static methods. You can use by typing:

SVG.noConflict();

Static Methods	Description
noConflict	returns the SVG variable to its previous owner
transformAttrToObj	converts an SVG transform attributes string to an object
transformAttrToStr	converts an SVG transform attributes string to an object
draw.getArc	draws an arc
draw.getLine	draws polygonal lines
draw.getMultipolyline	draws a set of polylines

Create an SVG object:

Constructor	Description
SVG('#id')	creates the SVG object and insert an SVG node inside a DIV

Chaining Methods

Chaining Methods	Description
firstParent	moves to the first parent
parent	moves to parent SVG element
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 an SVG element before the reference SVG element and selects it
appendAfter	appends an SVG element after the reference SVG element and selects it
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 children from the selected element
empty	removeAllChilds alias
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

*chaining methods return this*.

Non Chaining Methods

Non Chaining Methods	Description
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