using svg in reveal.js

[ghost]

Hi,
I would like to animate (actually extend) a scheme made in svg.
How do I do this with reveal.js.

eg. start with a square, first progress would draw a new circle (in a different layer) and next progress draws a star (new layer) and remove the square.

Any pointers how to do this?

[ghost]

Hi,

This how far i got: I can use fragment for incremental showing (I think).
I don't know how to use svg ids and or classes for showing certain groups.

From some googling i did found that somehow i can use

However this shows the complete figure and not only layer1...

any pointers?

[maxmeyer]

Be careful if you add css to your embedded svg, mermaid-js/mermaid#157, https://www.fedux.org/articles/2015/05/08/embedded-css-in-svg-image.html

[rajgoel]

Hi,

you can check out this plugin for animated svg:
https://github.com/rajgoel/reveal.js/tree/animate/plugin/animate

You can find a small example from pull request #804 here: http://courses.telematique.eu/reveal.js-animate/index.html#/20 . In the example the animation is embedded in the svg-file. When advancing to the next fragment, the svg-animation is triggered. There is not much documentation for the plugin, but the source code in index.html and Soccer_ball_animated.svg should be self-explaining.

[cknoll]

Great!

Just for reference: the gist has been forked to a repo: https://github.com/csachs/reveal-svg-fragment.
Nevertheless to make this work I had to add <script src="//cdn.jsdelivr.net/d3js/3.5.17/d3.min.js"></script> which is mentioned in the comments below the gist https://github.com/rajgoel/reveal.js/tree/animate/plugin/animate.