Press "Enter" to skip to content

Manipulating and Animating SVG with Raw Javascript | SVG.js

SVG is a small JavaScript library that aims to create and manage SVG elements in the DOM. SVG is designed to be included in another library. SVG is designed to run on ECMAScript 2015 (ES6) compatible browsers.

svg animation, animating svg with css, animate svg fill left to right, svg animation library, javascript load svg from file, free svg animations, svg line animation generator

How to make use of it

1. Download and cargo the SVG.js library within the doc.

<script src="/lib/svg.js"></script>

2. Create a brand new SVG object and insert it into a component you specify.

<div id="app"></div>
const svg = SVG('#app');

3. Append new parts & attributes to the SVG node.

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 component with the next 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's a polygon
draw.getMultipolyline(shape, closed);

Select SVG Elements with Javascript, Animating SVG with Javascript, Easy Creation And Manipulation Of SVG, Simple Intro to SVG Animation, svg shape animation


See Demo And Download

Official Website(jclo): Click Here

This superior jQuery/javascript plugin is developed by jclo. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.