Question 298789 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – 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)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    I uploaded an animated SVG I made and implemented it within the code you’ve added here. The SVG animation works and can be seen in the snippet below.

    I’m assuming your SVG file is the cause of the issue rather than the code you’re using here.

    $("#myDiv").html('<div class="" style="image-rendering: auto;"><img src="https://svgur.com/i/10G_.svg"></div>');
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search