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>

并且我正在使用jquery之类的运行时在svg上添加动画：

 //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的某些部分无法加载）。

在大多数情况下，这是第一次加载问题，但有时是由于互联网连接速度慢而发生的。

有人可以帮忙吗？

谢谢

大型svg的svg元素和动画有时无法完全加载

0 个答案: