I have a bunch of paths for a Kanji character and a simple one named test.svg is given as follows.
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<style>
path {
fill: none;
stroke: black;
stroke-width: 3;
}
</style>
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" />
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" />
<path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" />
<path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" />
<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" />
<path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" />
</svg>
Question
Is it possible to import these paths as an animated PDF with animate such that each frame shows a progressive step to write the character. For example, the first frame only shows the first path, the second frame shows the first two paths, etc.
Edit
An animation in an HTML for testing.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<object type="image/svg+xml" data="test.svg"></object>
<p><button class="animate">Animate</button></p>
<script>
(function () {
var button = document.querySelector('.animate');
button.onclick = function (event) {
var object = document.querySelector("object");
var doc = object.contentDocument;
var paths = doc.querySelectorAll('path');
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition = 'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out ' + (2 * i) + 's';
// Go!
path.style.strokeDashoffset = '0';
}
};
}());
</script>
</body>
</html>
