我想从范围内获得的数据中绘制 svg。但当它由于某种原因呈现部分为空或 NaN
时。
另外,渲染后我遇到了这样的错误
如何在数据准备好之前阻止渲染指令?或者也许是其他原因导致这种情况发生,您认为是什么?
我得到了看起来像这样的指令的 View
<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
};
}]);
和 Controller
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();
}]);
最佳答案
主要问题是您的 svgConfig.textConfig.distance.Y
是错误的。 distance
属性不属于 textConfig
对象,它作为单独的属性保存。因此计算会产生一个值 NaN
。该值应为 svgConfig.distance.Y
尽管我建议您使用 ng-attr-*
属性来像 ng 一样动态渲染
x
和 y
属性值-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>
关于javascript - AngularJS 动态 SVG 显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38926056/