Easy Creation And Manipulation Of SVG Elements – SVG.js

Category: Javascript | January 31, 2022
Author:jclo
Views Total:904 views
Official Page:Go to website
Last Update:January 31, 2022
License:MIT

Preview:

Easy Creation And Manipulation Of SVG Elements – SVG.js

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

You Might Be Interested In:


Leave a Reply