1

So, I have an SVG path animated with CSS animation. This animated SVG is set as a background image of the div. The issue is that when I refresh the page, CSS background-image gets cached which leads to animation not getting executed but it shows the final fully displayed SVG. I have checked out the solutions from other users by getting random strings. This solution works by creating random strings on each refresh. In my case, I can't use any scripts. So, is there any way around this besides putting my SVG in HTML file? Thanks

Luka
  • 171
  • 1
  • 1
  • 19
  • Does this happen when using other image formats? – AJMaxwell Feb 27 '19 at 17:27
  • Not sure, but I have to use svg in this case. As far as I understand, css stores all data in cache – Luka Feb 27 '19 at 17:38
  • Have you tried inlining the SVG in the CSS with a data uri? Something like this https://css-tricks.com/using-svg/#article-header-id-13 – AJMaxwell Feb 27 '19 at 18:07
  • This CSS Tricks forum post from 2014 may help https://css-tricks.com/forums/topic/trouble-with-animated-svg-in-chrome/ – AJMaxwell Feb 27 '19 at 19:45
  • Can we also get a codepen or jsfiddle of your code? – AJMaxwell Feb 27 '19 at 19:46
  • Hi, thanks for the response. I would love to post a codepen but the project is connected with the company so I may not upload any files not to get in trouble:( I have checked this post that you sent but in my case animation works. The issue is that as soon as the animation is done and SVG stroke is drawn, CSS gets saved in cache and now unless I do a hard refresh with cleaned cache, it doesn't serve this SVG draw effect again but a fully finished and visible background. – Luka Feb 28 '19 at 07:30
  • @Luka please do create an example, separated from your project, reproducing your problem, so that we can get a better idea of what is going on – Alex Under Mar 05 '19 at 13:41

0 Answers0