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

2019年7月27日 169次阅读

我试图在< tspan>中证明文本的合理性.使用 javascript的元素,因为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解决方案吗？如果没有,我如何正确计算每个单词之间的间距以获得合理的文本.

最佳答案 只需 fixed间距计算：

wordSpacing = spanLength / (wordCount-1) / 2

减去1得到空格数,发现间距加倍.还固定字数计算.

点赞