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 jsvg with all npm packages installed. Try it out:

var jsvg = require("jsvg")

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

jsvg v0.0.5

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

JSVG

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

NPM install

JSVG is no longer maintained. Please, use @mobilabs/svg now.

JSVG is a tiny Javascript library intended to create and manage SVG elements in the DOM. JSVG is designed to be embedded in another library.

Quick Startup

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

// JSVG is built upon the prototypal pattern, you don't need the operator 'new'.
var svg = JSVG('#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 = JSVG('#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

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

JSVG.noConflict();
Static MethodsDescription
noConflictreturns the JSVG variable to its previous owner
addClassadds an attribute of class to the SVG element
removeClassremoves an attribute of class to the SVG element
transformAttrToObjconverts an SVG transform attributes string to an object
transformAttrToStrconverts an SVG transform attributes string to an object
draw.arcdraws an arc,
draw.linedraws polygonal lines (deprecated),
draw.multipolylinedraws a set of polylines

Create an SVG object:

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

Chaining Methods

Chaining MethodsDescription
selectselects an SVG element
parentmoves to parent SVG element
firstParentmoves to the first parent
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
removeAllChildsremoves all the children of the selected element
animatesets animation transition parameters
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
createEventreturns 'animationOver' event,
queryreturns the first matching element or null,
getElementreturns the selected SVG element,
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,
getAnimationStatusreturns the animation status w.r.t. this SVG element (deprecated),
stopAnimationsets isAnimationOn to false (deprecated),
getAttachedEventreturns the non native event attached to this SVG element,
triggertriggers the event attached to this SVG element,
setMessageattaches or set a message to this SVG element,
getMessagereturns the message value attached to this SVG element,

License

MIT.

Metadata

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