html - SVG文本getComputedTextLength对于阿拉伯字体而言太短

我正在尝试为Web应用程序在SVG中为阿拉伯文本添加特定字体。字体看起来不错，但是getComputedTextLength（）返回的结果“太短”，即，文本占用的空间比渲染时要多。尝试换行时等会导致问题。

有人知道解决方法或解决方案吗？我尝试了几种不同的字体，并在Chrome和Firefox中获得了相同的结果。

https://fonts.google.com/specimen/Cairo

<link href="https://fonts.googleapis.com/css?family=Cairo&display=swap&subset=arabic" rel="stylesheet">

https://www.google.com/get/noto/#kufi-arab

@font-face { font-family: 'NotoKufiArabic'; src: url('../font/NotoKufiArabic-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal;}

给出了“太短”结果的样本d3代码：

    legend.append("text")
        .text(function (d) { return d.data.label)})
        .each(function(d) { d.legendWidth = this.getComputedTextLength() + 24 });

24只是一些填充。 legendWidth太小。我尝试应用例如1.4，但这并不能解决所有情况。如果我不尝试使用特定的阿拉伯字体，这将非常有效。

最佳答案

我知道发生了什么事。图表代码会在加载阿拉伯字体之前调用getComputedTextLength（），并为较窄的后备字体计算宽度。然后加载字体，文本元素突然变大了很多，但是我的JS代码没有运行。