CODEWITHSUNDEEP
javascriptjqueryanimationsvg
yankee
yankee

Reputation: 40870

Animation in stand alone SVG (with ecmascript (and jQuery?!))

I created an SVG using inkscape and now I want to add some animation according to some logic to it.

I know JavaScript quite well and have basic experience with jQuery. So I thought I can animate my SVG with jQuery as well.

Google finds countless tutorials on how to work with inline SVG embedded in XHTML, but I have a stand-alone SVG and Firefox complains

Error: b.style is undefined

Source File: [...]jquery.js

Line: 16

Is there a way to get jQuery working? Or, as an alternative, can you recommand another JavaScript library I could use that fulfills the purpose?

Upvotes: 3

Views: 1149

Answers (2)

Chasbeen
Chasbeen

Reputation: 1436

I agree with the last answer. Drop your SVG into the converter at

http://irunmywebsite.com/raphael/svgsource.php

This will put your SVG into html4 and it will work on all browsers except android. You can animate the paths with Raphael.

The output from the converter is all Raphael / SVG / VML

Upvotes: 1

rsp
rsp

Reputation: 111506

I would recommend to try the Raphaël library. The API was inspired by jQuery so it should be familiar to you.

Also keep in mind that IE doesn't support SVG so having an SVG-only solution won't be portable across major browsers. Raphaël takes care of it for you - it uses VML on IE and SVG on other browsers. It works on Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

You can create SVG using Inkscape and then import the paths to your Raphaël code. See the talk by Dmitry Baranovskiy at JSConf 2010.

Upvotes: 2

Related Questions