Search code examples
htmljquerysvg

SVG animation only starts when I open the browser's development tools

When I inject a div with an SVG animated image into the HTML inside a Bootstrap 5 offcanvas, which is then displayed programmatically, the animation only starts if I open the development tools integrated with the browser.

$("#myDiv").html('<div class="" style="image-rendering: auto;"><img src="/img/loading-spinner.svg"></div>');

I'm using Chrome, version 119.0.6045.161 (Official Build) (64-bit)

Solution

  • I solved it by loading the SVG with the tag "SVG", the animation is started immediately.

    <svg width="40" height="40">       
   <image xlink:href="/img/loading-spinner.svg" width="50" height="50"/>    
</svg>