Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @mobilabs/svg with all npm packages installed. Try it out:

var svg = require("@mobilabs/svg")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@mobilabs/svg v0.0.5

A tiny Javascript library intended to create and manage SVG elements in the DOM

SVG

NPM version Travis CI Test coverage Dependencies status Dev Dependencies status License

NPM install

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 MethodsDescription
noConflictreturns the SVG variable to its previous owner
transformAttrToObjconverts an SVG transform attributes string to an object
transformAttrToStrconverts an SVG transform attributes string to an object
draw.getArcdraws an arc
draw.getLinedraws polygonal lines
draw.getMultipolylinedraws a set of polylines

Create an SVG object:

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

Chaining Methods

Chaining MethodsDescription
firstParentmoves to the first parent
parentmoves to parent SVG element
previousselects the previous sibbling element
nextselects the next sibbling element
selectselects an SVG element
appendappends an SVG element and selects it
appendBeforeappends an SVG element before the reference SVG element and selects it
appendAfterappends an SVG element after the reference SVG element and selects it
appendHTMLappends a foreignObject to svg and selects it
replacereplaces the current SVG element
removeremoves the given SVG element
removeChildremoves the passed-in child element,
replaceChildreplaces a child by another,
removeAllChildsremoves all the children from the selected element
emptyremoveAllChilds alias
listenattaches an event listener to the SVG element
listenOnceattaches a fired once event listener to the SVG element
unlistenremoves an event listener to the SVG element
alinkadds a link attribute to the SVG selected element
attradds attributes to the selected SVG element
rmattrremoves the given attribute from the selected SVG element
textadds text to the selected SVG element
addClassadds a class value to the selected SVG element
removeClassremoves a class value to the selected SVG element
toggleClasstoggles a class value to the selected SVG element

chaining methods return this.

Non Chaining Methods

Non Chaining MethodsDescription
queryreturns the first matching element or null
getElementreturns the selected SVG element
childrenreturns the children HTMLCollection
getAttributereturns the attribute value
getComputedStylereturns the style applied to this element
getPropertyValuereturns the value of the specified property
getSizereturns the width and height of this element
getBboxreturns the bounding boxes

License

MIT.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free