Animated SVG: how to restart the animation?

Animated SVG: how to restart the animation?

  

Hello, I just created an animated SVG (see attachment). When putting it as an image on an outsystems screen it will animate when you get to that page. When you refresh the page (F5) or do an AJAX refresh of either the image or the container, in which I've put the SVG-image, the animation does not restart.

When just opening the image in a web browser then do a refresh of page the result is a restart of the animation.

Any ideas on how to fix this in outsystems?
    Assumption: it is fixable ;-)


Hi Edwin,

One possible solution is to replace your Image widget by an "<object>" tag. So you'd create an unescaped expression with the following value:

"<object type='image/svg+xml' data='/NewWebApp/img/nestingboxes2.svg'></object>"

Where "data" contains the runtime path to your image, available in the image's properties. Of course, that implies hard coding the image's path, which is not ideal. What you can do is create a function that returns the paths of all the required images. This way, if you need to replace one of the images, which might result in a new runtime path, you'll just have to update the function.

Solution

Hi Aurelio,

It works like a charm! Since I'm no UI expert (to say the least) it took me some googling to work out the details on the 'unescaped expression'. Just put an expression on the screen with:

  • Escape Content = No 
  • Value = "<object type='image/svg+xml' data='/NewWebApp/img/nestingboxes2.svg'></object>"

 ... and the animation shows up and is restarted on an AJAX refresh and on a refresh of the page.

Thank you for this solution and your advice on using a function for increasing maintainability.

Solution