Элементы SVG и анимация больших SVG иногда не загружаются полностью

Question

Я встраиваю svgs в мой html, используя:

<object type='image/svg+xml' 
        id= "MimicSVG"  
        height='100%' 
        width='100%' data="{{vm.svgPath}}" 
        ng-class="vm.isKc == true ? 'width700' : 'width100' " ></object>

, и я добавляю анимацию к svg во время выполнения, используя jquery, например:

 //Outer Path
        var outerObjectID = value['outerObjectID'];
        var outerSvgdoc = angular.element(svggroup.querySelector('#' + outerObjectID))[0];
        var outerSvgStyle = "stroke:" + mimicTypeMap[type]['outercolor'];
        if (value["tunnel"] != undefined) {
          outerSvgStyle = outerSvgStyle + ";stroke-dasharray : 20 5";
        }
        outerSvgdoc.setAttribute('style', outerSvgStyle);



        //Inner Path
        var innerObjectID = value['innerObjectID'];
        var innerSvgdoc = angular.element(svggroup.querySelector('#' + innerObjectID))[0];
        var innerSvgStyle = "stroke:" + mimicTypeMap[type]['innercolor'];
        if (value["tunnel"] != undefined) {
          innerSvgStyle = innerSvgStyle + ";stroke-dasharray : 20 5";
        }
        innerSvgdoc.setAttribute('style', innerSvgStyle);



        //Animation
        var flowanimationObj = mimicTypeMap[type]['flowanimation'];
        var animationSvgDoc = angular.copy(innerSvgdoc);
        var flowanimationStyle = "stroke-width:2px;stroke-dasharray:10;fill:transparent;stroke:" + flowanimationObj['color'] + ";-webkit-animation: dash " + (mimicTypeMap[type]['flowanimation']['required'] == 'false' || value['flowoverride'] == 'stop' ? "1000000s" : "100s") + " linear infinite;animation-direction:" + value['flowdirection'];
        animationSvgDoc.setAttribute('id', 'flow' + key);
        animationSvgDoc.setAttribute('class', 'path')
        animationSvgDoc.setAttribute('style', flowanimationStyle);
        svggroup.append(animationSvgDoc);



        //Text
        var textObj = value['text'];
        if (value['text'] && svggroup.querySelector('#' + textObj['id']) && textObj) {
          var textSvgdoc = angular.element(svggroup.querySelector('#' + textObj['id']))[0];

          if (type == "Flowing" || type == "Non-Flowing" || type == "Alert") {
            textSvgdoc.textContent = (vm.canalMimicFlowData[textObj['key']] != 'undefined' && vm.canalMimicFlowData[textObj['key']] != undefined && vm.canalMimicFlowData[textObj['key']]['current_discharge'] != 'undefined' && vm.canalMimicFlowData[textObj['key']]['current_discharge'] != undefined) ? (vm.canalMimicFlowData[textObj['key']]['current_discharge'] + " cusecs") : "";
          } else {
            textSvgdoc.textContent = (vm.flowData && vm.flowData[textObj['key']]) ? vm.flowData[textObj['key']].toFixed(0) + " cusecs" : "";
          }

Есть еще несколько бизнес-логикичто я делаю, но это основная логика для добавления анимации в SVG.

Иногда я не могу получить анимацию, а иногда сама SVG не загружается полностью (то есть, некоторые части SVGне загружать).

В большинстве случаев это проблема загрузки с первого раза, но иногда это происходит из-за медленного интернет-соединения.

Может кто-нибудь помочь?

Спасибо