Author: | jclo |
---|---|
Views Total: | 904 views |
Official Page: | Go to website |
Last Update: | January 31, 2022 |
License: | MIT |
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