如何证明SVG文本的合理性？

Question

我尝试使用javascript在<tspan>元素中对文本进行辩护，因为SVG尚未支持text-align: justify。我确信我非常接近正确的解决方案，但似乎无法在单词之间获得正确的字间距，这样每条线都可以左右对齐。

这是问题的CodePen link，可以完整地看到它。只需单击页面底部的其中一个按钮即可运行该功能（向下滚动页面以查看按钮）。

但我相信问题出在这里：

首先，我循环遍历每个<tspan>元素并将其原始长度推送到数组。

for (i = 0; i < tspan.length; i++) {
 spanText.push(tspan[i].offsetWidth);
}

然后我将该数组中最长的值存储在变量

中

longestSpan = Math.max.apply(Math, spanText);

然后我再循环遍历每个<tspan>并计算每个单词之间所需的间距，以便将每行的文本调整为最大<tspan>的宽度

for (i = 0; i < tspan.length; i++) {
 var spanLength = longestSpan - tspan[i].offsetWidth;
 var wordCount = tspan[i].innerHTML.split(/\s/).length;
 var wordSpacing = spanLength / (wordCount - 1);
 tspan[i].setAttribute('word-spacing', wordSpacing);
}

正如您在上面的链接中所看到的，每行的对齐文本略有偏差。

这有一个纯粹的SVG解决方案吗？如果没有，我如何正确计算每个单词之间的间距以获得合理的文本。

Answer 1

只需fixed间距计算：

wordSpacing = spanLength / (wordCount-1) / 2

减去1得到空格数，发现间距加倍。还修复了字数统计。