小编Bay*_*yan的帖子

如何在snap svg中自动文本换行文本?

使用以下插件和代码,您可以将文本包装在以下位置\n:

Snap.plugin(function (Snap, Element, Paper, glob) {
    Paper.prototype.multitext = function (x, y, txt) {
        txt = txt.split("\n");
        var t = this.text(x, y, txt);
        t.selectAll("tspan:nth-child(n+2)").attr({
            dy: "1.2em",
            x: x
        });
        return t;
    };
});
Run Code Online (Sandbox Code Playgroud)

//你可以像这样使用它:

var ttt = paper.multitext(100, 100, "Sample\nmultiline\ntext").attr({
    font: "18px Arial",
    textAnchor: "middle"
}); 
Run Code Online (Sandbox Code Playgroud)

它产生:http: //jsbin.com/panaxujuta/1/edit?html,output

              Smaple
             multiline
               text
Run Code Online (Sandbox Code Playgroud)

如何使用rect Width作为长短语或段落行的限制来自动执行此过程?我不想在svg中使用foreignobject以便稍后我需要文本.请原生svg解决方案.任何想法将不胜感激.

编辑:而不是拆分\n我们如何分割文本行的某个宽度?

Edit2:我有这个代码使用上面的插件,为什么这不起作用?:

var phrase = "Etiam porttitor risus in ex blandit sodales. Ut cursus mi augue, sit amet interdum …
Run Code Online (Sandbox Code Playgroud)

javascript svg word-wrap raphael snap.svg

1
推荐指数
1
解决办法
3104
查看次数

标签 统计

javascript ×1

raphael ×1

snap.svg ×1

svg ×1

word-wrap ×1