rstudio / rstudio/flexdashboard

svg animations don't work in flexdashboard but they do in Rmd

Open
#231 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
848
Forks
298
PR merge metrics
No merged PRs in 30d

Description

Hi all,

First and foremost, this is a great package. I extensively use all of rstudio's packages and have a soft spot for each of them. flexdashboard is no exception. I appreciate all of your hard work.

This isn't something that I would expect to be fixed, but I was curious if anyone might know why I can create an svg animation in Rmarkdown, but not flexdashboard?

As an example, if I run this in Rmarkdown, I get the expected output and interactivity on click.
But if I run this in flexdashboard, nothing happens.
Any ideas why?

<svg width="500" height="350">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
  <rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>
  <animate 
           xlink:href="#orange-circle"
           attributeName="cx"
           from="50"
           to="450" 
           dur="5s"
           begin="click"
           fill="freeze" 
           id="circ-anim"/>
  <animate 
           xlink:href="#blue-rectangle"
           attributeName="x" 
           from="50"
           to="425" 
           dur="5s"
           begin="circ-anim.begin + 1s"
           fill="freeze" 
           id="rect-anim"/>
</svg>
<p>Click on the circle to animate it, and animate the rectangle after it.</p>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the inline SVG example in the issue and reproduce it in both an R Markdown document and a flexdashboard. Compare the rendered output and click behavior to identify the difference; done means the documented circle and rectangle animations work in flexdashboard as they do in R Markdown.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, r
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.