javascript - 为 Svg 调整文本，这怎么可能？

Question

我试图让我的文本在某些 svg 中对齐。这怎么可能？ CSS:

text-align:justify 

不工作，

我发现的只是:

text-anchor="middle";text-anchor="start";text-anchor="end"

但这只是左对齐、右对齐或居中对齐，而不是从左到右对齐。

有什么解决办法吗？

这是一个实例(用 Chrome 检查):http://codepen.io/anon/pen/vGERRq

谢谢

Answer 1

可以通过 Javascript 为 INLINE SVG 做到这一点!我给你做了一支笔，给你展示原理。我自己也在寻找类似的东西，但没有在任何地方找到。它似乎不是规范的一部分，所以用 Javascript 来做是合理的:)

这是一行文本对齐的基本结构，每个单词都应该是一个文本标签:

<g class="line" transform="translate(0,40)">
    <text>Another</text>
    <text>line</text>
    <text>of</text>
    <text>text</text>
</g>

这是 javascript 代码:

var lines=document.getElementsByClassName("line");
for(var l=0;l<lines.length;l++)
{
    var line=lines[l];
    var total_width=200;
    var texts=line.getElementsByTagName("text");
    var width_of_texts=0;
    for(var i=0;i<texts.length;i++)
    {
        width_of_texts+=texts[i].getBBox().width;
    }
    if(texts.length>1)
    {
        var extra_space=(total_width-width_of_texts)/(texts.length-1);
        var x=0;
        for(var i=0;i<texts.length;i++)
        {
            texts[i].setAttribute("x",x);
            x=x+texts[i].getBBox().width+extra_space;
        }
    }
}

这是一个工作示例。 https://codepen.io/SnoepGames/pen/zVaRoZ

简短的解释。我们可以使用与 HTML 元素相同的方式获取内联 SVG 中的类和元素。使用 getBBox()，我们可以以与 SVG 文本元素的 getBoundingClientRect 相同的方式获取 HTML 元素的文本宽度。剩下的就是加和减。

您也可以将数据属性放在具有“对齐线”类的组中，以动态设置宽度，这样您就会得到一个非常有用的脚本。

脚本现在将使用类线将所有分组文本调整为固定宽度(变量总宽度 = 200)该脚本通过添加空格来进行对齐，但您也可以使用此原理在字母之间进行对齐。