SVG Animation Syncing

[robmarsh]

I have been playing around with using SVG animations to create custom visuals and then adding them to a table. I have had a lot of success doing this, and have managed to create an SVG that basically cycles between two svg elements using the animate function to cycle the opacity of each svg. The effect is that it displays the first svg (showing a percentage score) for about 5 seconds and then fades the second svg in (showing the rank).

My issue is, because this svg is being used in a table, they get loaded in at fractionally different times. So the first row may get loaded a fraction of a second before the last row in the table, creating a very subtle delay in the animations. The effect is most noticeable if the table has a vertical scrollbar, I assume because the svg is only loaded when it is scrolled to. This means the loaded svgs following a scroll would probably be completely out of sync to the ones that are already loaded.

Don't get me wrong, this is a minor annoyance, but it would be nice to be able to force these to sync with each other.

I have tried creating a sacrificial svg and giving it an id="syncsvg" in the <animate> tag, then referencing all of the other svg elements to begin their animation at the end of that one. But this didn't work, I think each SVG is created in isolation by Power BI and then passed back to the report as an image file. Has anyone come across this and found a way to sync them?

[lbendlin]

Yes, rows are loaded into visuals paged (in 501 row chunks - you can check the DAX code for each visual).

Does SVG have access to the time functions like now() ?  You could enforce the animation to start at "the chime of the second" or some such.  I would guess that for very long visuals or for scenarios where you scroll just so that you show parts of two pages you would still see the difference.

[robmarsh]

Hi @lbendlin , thanks for your suggestion. I did look into that, but then realised that, even if you could, it would have the same issue, as NOW() would be loaded row by row (and then stop with the first 501 records, as you say). That is why I was hoping to trick them into being anchored to one sacrificial svg, which I could then use begin="syncicon.end" in the <animate> html to sync them all to. But it didn't work unfortunately. If you inspect the svg graphics, they arent embedded as typical SVG html, it is like Power BI renders them as an image and then links to that image instead.

[lbendlin]

If I were you I would leave it at that. You are already bending the rules of physics quite a bit.