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.
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>JSVG provides a set of static methods. You can use by typing:
JSVG.noConflict();| Static Methods | Description |
|---|---|
| noConflict | returns the JSVG variable to its previous owner |
| addClass | adds an attribute of class to the SVG element |
| removeClass | removes an attribute of class to the SVG element |
| transformAttrToObj | converts an SVG transform attributes string to an object |
| transformAttrToStr | converts an SVG transform attributes string to an object |
| draw.arc | draws an arc, |
| draw.line | draws polygonal lines (deprecated), |
| draw.multipolyline | draws a set of polylines |
| Constructor | Description |
|---|---|
| JSVG('#id') | creates the SVG object and insert an SVG node inside a DIV |
| Chaining Methods | Description |
|---|---|
| select | selects an SVG element |
| parent | moves to parent SVG element |
| firstParent | moves to the first parent |
| 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 |
| removeAllChilds | removes all the children of the selected element |
| animate | sets animation transition parameters |
| 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 | Description |
|---|---|
| createEvent | returns 'animationOver' event, |
| query | returns the first matching element or null, |
| getElement | returns the selected SVG element, |
| 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, |
| getAnimationStatus | returns the animation status w.r.t. this SVG element (deprecated), |
| stopAnimation | sets isAnimationOn to false (deprecated), |
| getAttachedEvent | returns the non native event attached to this SVG element, |
| trigger | triggers the event attached to this SVG element, |
| setMessage | attaches or set a message to this SVG element, |
| getMessage | returns the message value attached to this SVG element, |
MIT.