This is a fork of this gist by user @bollwyvl, to fix some minor issues and allow node packaging.
SVG fragment builds for reveal.js
- make an SVG (maybe in inkscape)
- save it someplace reveal.js can find it (maybe next to your presentation)
- figure out how to identify them (maybe use named layers)
- in reveal.js/index.html
- add
reveal-svg-fragment.jsas a dependency - in a
<section>of reveal.js markup- add
data-svg-fragment="<url of the someplace>"to something, e.g. adiv - add some things with
class="fragment"inside that thing- add
title="<a selector>"to those things[*|label=<a label>]is good- for more about selectors, check out the W3C page
- add
- add
- add
Let's assume I made an SVG in Inkscape, and saved it next to my index.html.
It has three layers: base, fragment1 and fragment2.
<html>
...
<section>
<div data-svg-fragment="figure.svg#[*|label=base]">
<a class="fragment" href="[*|label=fragment1]"></a>
<a class="fragment" href="[*|label=fragment2]"></a>
</div>
</section>
...
<script>
...
Reveal.initialize({
dependencies: [
...
{
// maybe you put this in `plugins`
src: 'reveal-svg-fragment.js',
condition: function(){
return !!document.querySelector( '[data-svg-fragment]' );
}
// Additional options
// defaults to using already-loaded version, or CDN
//d3: "./d3.min.js",
// use a different attribute for your fragment selector
//selector: "title",
}
...
]
...
}
...
</script>
...
</html>
- won't work in Chrome against
file://- workarounds:
- dropbox
- sharepoint
- confluence
- gist
python -m SimpleHTTPServer
- workarounds:
- probably won't work in IE
- wontfix