Vivus is a very nice and small javascript class that allows you to animate SVG’s, giving them the appearence of being drawn. See the original project here.
As the original class allows only to be used on SVG elements that are placed inside the html I've written a patch where the SVG can be placed inside an <object> which can be accessed and controlled with javascript.
Press the ”Play” button.
It's quite easy to use.
...
<object id="svg" type="image/svg+xml"
data="assets/svg/lens-with-external-vivus.svg">
Your browser does not support SVG
</object>
...
...
var svgDOM = null;
...
var vivusCallback = function(_vivusClass){
alert('Animation finished.');
}
...
document
.getElementById('svg')
.addEventListener('load', function(e){
svgDOM = e.target.contentDocument;
svgDOM.Vivus.setCallback( vivusCallback );
}, false);
...
Look at the source, especially the svg file.
The SVG was taken from the examples at Vivus and changed.
This ia an old project from 2009. I wrote this jQuery plugin in a time when eveything you made on a website has to be "pixelperfect" (>= IE 6) and took days or months longer (and got more grey hairs).
...
$('#ieSucks').ieSucks({
showAlsoIfBrowserIsNotIE :true
,showAtOnce :false
,imgPath :'assets/ieSucks/gfx'
,css :{
note:{
zIndex :20
,right :'-9px'
}
}
});
...