search

coolbutuseless / minisvg

Create SVG documents with R
https://coolbutuseless.github.io/package/minisvg/
MIT License
31 stars 3 forks source link

Frame extraction for animated SVG #2

Open dmi3kno opened 4 years ago

dmi3kno commented 4 years ago

It could be useful to be able to extract frames for conversion to gif with gifsky. Here, author of loading.io discusses how to navigate CSS and SMIL animations:

It’s quite straight forward to do this with JavaScript, but be aware that SVG can be animated in two different approaches, either CSS Animation or SMIL, and sometimes, both of them. For animation powered by CSS Animation, it could be done by using CSS attributes “animation-play-state: paused” + different delay with “animation-delay”. For animation powered by SMIL, you can use setCurrentTime ( DOM API for SVG, reference ). I won’t go through the detail here because it’s all technical details; both need to traverse all elements in the SVG to sample its current style, perhaps using getComputedStyle API in JS or manually parse and interpret attributes in SMIL elements.I’ve done it before so I know it’s complicated

I trust this may be not something you want to prioritize, but maybe you already thought about it and have an example (or an idea) how to implement "stopping" of animation at particular frame?

coolbutuseless commented 4 years ago

Minisvg recently got support for easy addition of CSS + JS code. So the JavaScript method seems plausible, but I still feel you'll need to render in a browser.