Comment by derefr | Hacker News Reader

Comment by derefr | Hacker News Reader

Parent Full thread

Sadly, SVG still doesn't let you pause the animation, let alone copy-and-paste embedded text.

Given the number of Github projects that want terminal "demonstrations", I'm surprised Github hasn't just provided first-party support for it (with e.g. a fancy renderer for script(1) code-embeds, that would play back the script session by writing regular DOM text nodes; and which would give you transport controls to pause, scrub through, skip around, etc.)

While they're at it, they could also allow embedding of some kind of slide-deck format. Using GIFs for slides has all the same problems. (Hopefully nothing as fancy/complex as PPT; more like a basic-PostScript-profile PDF renderer, that would auto-carousel through the PDF's pages, until you begin interacting with it.)

> Sadly, SVG still doesn't let you pause the animation

Not even through `animation-play-state: paused;`? e.g:

    :hover {
      animation-play-state: paused;
    }

The termtosvg repo linked by another commentor seems to have a pausable example in their examples gallery, so it appears to be doable.

The difference there is that the pausable SVG is embedded on the page as an object element. There is Javascript inside the SVG document that is enabling the replay to be pausable.

Github readmes however only allow embedding SVGs as images, and Javascript won't work in that case.

EDIT: added a missing word

Does :focus or :hover apply to CSS in SVG in an <img/> tag? If so, you could use those to implement a sort of pause by combining with the next-sibling operator (actually I really really like the + operator in CSS selectors, because a lot of things that people think you need JS to do can be done with a combination of :focus and +).

Reply on news.ycombinator.com