我有一个简单的JavaScript代码，在验证码图像刷新时生成等待加载微调器。该脚本可以很好地处理gif图像，但对于动画svg图像，加载微调器不起作用，并在FireFox中在浏览器的网络控制台中返回NS_BINDING_ABORTED。以下是代码：

$(document).ready(function(){
    $("#captchaImg").click(function(e){
        e.preventDefault();
        src = $(this).children('img').attr('src');
        width = '{{config('captcha.flat.width')}}px';
        height= '{{config('captcha.flat.height')}}px';
        console.log(width, height)
// IN THE FOLLOWING LINE, REPLACING gif with svg makes the error.
        $(this).children('img').attr({'src':'/imgs/loading.gif','width':width, 'height': height})
        src = src.replace(/&t=.*/,'')
        t = new Date();
        $(this).children('img').attr('src',src+"&t="+t.getTime());
        $( "#randQuote" ).text( '{{__('Loading')}}' );
        $.ajax({
                url: "/rand-quote",
                cache: false
             })
            .done(function( data ) {
               console.log(data.msg)
                $( "#randQuote" ).text( data.msg );
                return false;
            }); 
    })
})

我不知道在这种情况下gif和svg之间的区别是什么，导致了这个问题？我该如何解决它？!

注：

使用的svg映像由https://loading.io和以下代码生成：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="64px" height="64px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)">
  <rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#482173">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(45 50 50)">
  <rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#2e6f8e">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(90 50 50)">
  <rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#29af7f">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(135 50 50)">
  <rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#bddf26">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(180 50 50)">
  <rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#482173">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(225 50 50)">
  <rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#2e6f8e">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(270 50 50)">
  <rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#29af7f">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(315 50 50)">
  <rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#bddf26">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
  </rect>
</g>
<!-- [ldio] generated by https://loading.io/ --></svg>