AngularJS动态SVG显示

Question

我想从我得到的数据中绘制svg。但是当它由于某种原因而使其变为空的或NaN。

而且，我喜欢这里的错误正确渲染

如何防止渲染指令，直到数据准备好后？或者也许是它发生这种事情的另一个原因，你觉得呢？

我视图指令，它看起来像

<svg height="500" width="500" ng-if="svgConfig.textConfig"> 
</g> 
    <svg height="{{svgConfig.height}}" 
     width="{{svgConfig.width}}" 
     y="{{(svgConfig.textConfig.fontSize) + 1*svgConfig.textConfig.distance.Y}}"> 
     <g 
      transform="translate(0, {{svgConfig.textConfig.distance.Y}})">   
      <text font-family="{{svgConfig.textConfig.fontFamily}}" 
       font-size="{{svgConfig.textConfig.fontSize}}" 
       x="0" y="0" 
       inline-size="200" 
       alignment-baseline="text-before-edge"> 
       {{line}} 
      </text>  
     </g> 
    </svg> 
</g> 

而且我得到了指令，这样的

app.directive('myDirective', [ function() { 
    return { 
     restrict: 'E', 
     templateUrl: './app/myDirective.html', 
     controller: 'mySvgController', 
     transclude: true 
    }; 
}]); 

而且控制器

modernFilterApp.controller('mySvgController', ['$scope', function($scope){ 
    $scope.init = function(){ 

     $scope.textFonts = textConfigEnum.data; 

     // Container for svg settings 
     $scope.svgConfig = { 
      text:'', 
      textConfig: { 
       fontFamily: $filter('getTextConfigByType')(textConfigEnum.info.Arial).fontFamily, 
       fontSize: 20, 
       fontDecoration: null, 
       fontWeigth:null 
      }, 
      distance:{ 
       X: 0, 
       Y: 0 
      } 
     }; 
    }; 

    $scope.init(); 
}]); 

Answer 1

的主要问题是y你有svgConfig.textConfig.distance.Y这是错误的。 distance属性不属于textConfig对象，因此属于个人财产。由于哪个计算产生值NaN。该值应该是svgConfig.distance.Y

虽然我会建议你使用ng-attr-*属性来渲染x & y属性值动态像ng-attr-y

</g> 
    <svg height="{{svgConfig.height}}" 
     width="{{svgConfig.width}}" 
     ng-attrs-y="{{(svgConfig.fontSize) + 1*svgConfig.textConfig.distance.Y}}"> 
     <g 
      transform="translate(0, {{svgConfig.distance.Y}})">   
      <text font-family="{{svgConfig.textConfig.fontFamily}}" 
       font-size="{{svgConfig.textConfig.fontSize}}" 
       x="0" y="0" 
       inline-size="200" 
       alignment-baseline="text-before-edge"> 
       {{line}} 
      </text>  
     </g> 
    </svg> 
</g>