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！我为您制作了一支钢笔，向您展示了原理。我本人正在寻找类似的东西，却在任何地方都找不到。它似乎不是规范的一部分，所以用Java语言来做是合理的：）

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

<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文本元素，我们可以使用与HTML元素的getBoundingClientRect相同的方式获取文本的宽度。其余的只是加减。

您还可以将数据属性放在具有“合理行”类的组中，以动态设置宽度，并且您将拥有一个非常有用的脚本。

脚本现在将使用类行将所有分组的文本对齐到固定宽度（var total_width = 200）该脚本通过添加空格来进行对齐，但是您也可以使用此原理在字母之间进行对齐。

Answer 2

您是否尝试过javascript style.textAlign属性

elem.style.textAlign="justify"

Answer 3

你可以这样做：

text-align: justify;
text-align-last: justify;

Demo

还有一个text-align: justify-all属性，但在大多数浏览器中似乎都没有得到很好的支持。也许是未来读者的参考。

编辑：

您的<text>变为：

<text id="polaroidtext" class="wrap" x="350" y="100" dy="24" dx="1000" text-anchor="middle" style="font-family:'futuramedium'; font-size:16px;line-height:10px !important;text-align:justify;text-align-last:justify">

Answer 4

试试这个

对齐更改单词之间的间距：

对于div：

div {
text-align:justify;
text-justify: inter-word;
text-align-last:center;
/* for IE9 */
-ms-text-align-last:center;
}

请参阅：http://www.w3schools.com/cssref/css3_pr_text-justify.asp

为Svg辩护，怎么可能？

4 个答案: