Easy animation for KanjiVG SVG files.
Download the min.js file or install through npm:
npm install kanjivganimate --save
Include the min.js script located in KanjivgAnimate/dist.
Instantiate KanjivgAnimate and pass it a DOM selector.
new KanjivgAnimate('.kanjiVG');Pass an optional time value (in miliseconds) to speed up or slow down the animation.
new KanjivgAnimate('.kanjiVG', 700);
If no time is passed, the default time of 500 ms.
Make sure the KanjiVG svg tag also has the selector.
<svg class="kanjiVG" xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109">
<g style="fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;">
<!-- paths -->
</g>
<g style="font-size:8">
<!-- optional text numbers -->
</g>
</svg>Thats it.
Include the min.js file and pass the selector of the element you want to trigger the animation with.
new KanjivgAnimate('.kanjivg-button');On the clickable element, add a data-kanjivg-target attribute and pass it the ID of the svg tag to animate.
<div>
<svg id="animateMe" class="kanjiVG" xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109">
<g style="fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;">
<!-- paths -->
</g>
<g style="font-size:8">
<!-- optional text numbers -->
</g>
</svg>
</div>
<button class="kanjivg-button" data-kanjivg-target="#animateMe">Animate</button>KanjiVG is copyright Ulrich Apel and released under the Creative Commons Attribution-Share Aline 3.0 licence.