search

hakimel / reveal.js

The HTML Presentation Framework
https://revealjs.com
MIT License
67.59k stars 16.63k forks source link

using svg in reveal.js #1239

Closed ghost closed 8 years ago

ghost commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

rajgoel commented 9 years ago

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 commented 5 years ago

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.