Javascript和SVG。有没有办法检测文本是否已渲染？

我得到了一些动态生成的

svg

元素。它是根据

输入

字段中的文本生成的

每一次中断都意味着新的组元素结构就是这样

<g>
  <svg>
     <text/>
     <rect/>
  </svg>
</g>

UPD 2：

不幸的是，拉斐尔的回答对我也没有帮助：

UPD 3

我使用Angularjs框架，所以这里的代码是角度角度的（我猜）

svg文件的指令视图：

<svg ng-repeat="line in svgConfig.text track by $index">
    <g>
        <rect x="0" y="0" 
            ng-show="svgConfig.rectConfig[$index].active"
            ng-attr-height="{{svgConfig.rectConfig[$index].height}}" 
            ng-attr-width="{{svgConfig.rectConfig[$index].width}}" 
        >
        </rect>

        <text ng-attr-font-family="{{svgConfig.textConfig.fontFamily}}" 
            ng-attr-font-size="{{svgConfig.textConfig.fontSize}}"
            ng-attr-fill="{{svgConfig.textConfig.fontColor}}"
        >
            {{line}}
        </text>     

    </g>

</svg>

控制器：

app.controller('imageTxtSvgController', ['$scope', 'imageTxtSvgService', '$filter', 'textConfigEnum', function($scope, imageTxtSvgService, $filter, textConfigEnum){

    /**
    * Returns config for each text line rect
    */
    $scope.setSvgRectanglesConfig = function(textAreaList){
        var me = this,
            numberOfElements = (textAreaList) ? textAreaList.length : 0;

        if (numberOfElements <= 0) {
            return;
        }

        $scope.svgConfig.rectConfig = imageTxtSvgService.getSvgRectListData(textAreaList, $scope.svgConfig.rectsVisible, $scope.svgConfig);
    };

    $scope.init = function(){
        // Fonts data
        $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,
                fontColor:'black'
            },
            rectsVisible: true,
            rectConfig: [],

        };
    };

    $scope.init();
}]);

UPD 4：问题解决方案

看来我找到了解决办法

而不是这个

var domText = $element.find('text'),
                textExampleList = domText,
                textConfig = $scope.svgConfig.textConfig,
                font = textConfig.fontFamily,
                size = textConfig.fontSize;

            document.fonts.load(''+size + 'px ' + font+'').then(
                function(){
                    $scope.setSvgRectanglesConfig(textExampleList);     
                }
            );

应该是这样的：

var textConfig = $scope.svgConfig.textConfig,
                font = textConfig.fontFamily,
                size = textConfig.fontSize;

            document.fonts.load(''+size + 'px ' + font+'').then(
                function(){
                    var textExampleList = $element.find('text');

                    $scope.setSvgRectanglesConfig(textExampleList);
                    $scope.$apply();        
                }
            );

我应该在加载字体后获取dom数据，但在旧版本中，我使用了旧版本的dom数据。而且，我忘了应用更改

我认为您可以使用：

var text = 'Text to display';
var font = 'Font to use';
document.fonts.load('12px "'+font+'"', text).then(function() {
  // Here we can be certain the font is available
  // Measure the size now…
});

例如：

var-button=document.querySelector（'button'）；
var result=document.querySelector（'div'）；
按钮。addEventListener（'click'，函数（事件）{
var text='文本到rénder'；
//这将加载字体（除非已经可用）
document.fonts.load（'12px“Baloo Paaji”，text.），然后（function（）{
//在这里，我们可以确定字体是可用的
result.style.fontFamily=''Baloo Paaji'；
result.textContent=文本；
});
}，假）

加载字体
很有趣。这是因为字体加载和svg重新加载是异步的吗？第一个解决方案看起来很酷，我来试试，谢谢！第二种解决方案看起来不太好。\ u0.SVG呈现不是异步的：只要访问显示属性，就需要进行呈现。但是，虽然字体尚未加载，但度量将有所不同，因为文本将以回退字体呈现。@mzmm56中，然后在我的
控制器中调用函数，该控制器更新
$scope
文件，并与指令绑定，如
@RaphaelSchweikert谢谢，Raphael！你的答案真的是我想要的！你能再展示一些你的代码吗？也许是
setSvgRectanglesConfig
函数？@RaphaelSchweikert当然！更新它！更新。我尽量把它弄短些
var domText = $element.find('text'),
                textExampleList = domText,
                textConfig = $scope.svgConfig.textConfig,
                font = textConfig.fontFamily,
                size = textConfig.fontSize;

            document.fonts.load(''+size + 'px ' + font+'').then(
                function(){
                    $scope.setSvgRectanglesConfig(textExampleList);     
                }
            );

var textConfig = $scope.svgConfig.textConfig,
                font = textConfig.fontFamily,
                size = textConfig.fontSize;

            document.fonts.load(''+size + 'px ' + font+'').then(
                function(){
                    var textExampleList = $element.find('text');

                    $scope.setSvgRectanglesConfig(textExampleList);
                    $scope.$apply();        
                }
            );

var text = 'Text to display';
var font = 'Font to use';
document.fonts.load('12px "'+font+'"', text).then(function() {
  // Here we can be certain the font is available
  // Measure the size now…
});