Afficher un SVG progressivement avec reveal.js

Pour cela, il faut commencer par installer un plugin : svg fragments. Dans votre installation reveal, dans le sous dossier plugin, cloner le dépôt :

git clone https://gist.github.com/bollwyvl/fe1d2806449487cdf88a

Ensuite, chargez le plugin :

1. Ajoutez la bibliothèque D3 <script src="reveal/js/d3.min.js"></script> (à télécharger séparément)

2. Activez le plugin en ajoutant dans l'objet de configuration de reveal (celui passé à Reveal.initialize) :

   {src: 'reveal/plugin/svg-fragments/reveal-svg-fragment.js', condition: function () {
                  return !!document.querySelector('[data-svg-fragment]');
              }}
   

Puis dans votre SVG ajoutez un tag comme celui-ci inkscape:label="fragment1" sur les éléments à faire apparaître progressivement. Vous pouvez voir un exemple complet sur github.

Enfin, ajoutez le code correspondant dans votre html. Par exemple, pour le test.svg précédent :

<div data-svg-fragment="test.svg#[*|label=base]">
  <a class="fragment" title="[*|label=fragment1]"></a>
  <a class="fragment" title="[*|label=fragment2]"></a>
</div>

Disponible complètement sur github.