Animate SVG - JavaScript Libraries

Animate SVG - JavaScript Libraries

We can animate svg using javascript and CSS. However I came across some Javascript libraries for animating SVG.

1. snapsvg - http://snapsvg.io/
2. svgjs - http://svgjs.com/
3. Raphael - http://raphaeljs.com/

Finding Dimension of Text in Pixels - HTML5 Javascript JQuery

Finding Width & Height of Text in Pixels

HTML5 - Javascript - JQuery

For Div, Span

I came across a problem that i want to find width of the text in my page in order to properly align it. I found the solution using JQuery.

Steps

1. Wrap the text in a span and append to some element say to a div.

$(div).append("<span id='find-length'>"+text+"</span>").

2. Find width and height using JQuery.

var textWidth = $("#find-length").width();

var textHeight = $("#find-length").height();

For SVG

For finding dimension of svg text element we will make use of  getBBox() method.

Eg: var dimension = element.getBBox();

var textWidth = dimension .width;

var textHeight = dimension .height;

SVG.js manipulating and animating SVG - Clock using svg

SVG.js

Came across a beautiful clock example using svg which is developed using plugin SVG.js which is used as lightweight library for manipulating and animating SVG.

http://jsfiddle.net/boser18/7qcn3ptr/