如何证明 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得到空格数，发现间距加倍。还修复了字数计算。