使用Snap.svg创建多行文本

Create multiple lines of text with Snap.svg

本文关键字：文本 创建 Snap svg 使用      更新时间：2023-09-26

我一直不知道如何在Snap.svg中用一个paper.text元素创建多行文本

我尝试过使用
、''n及其变体，但都不起作用。我觉得奇怪的是，在raphael.js中这么容易做到这一点（它在文档中），但snap.svg文档对此只字未提，在web上搜索也一无所获。

非常感谢您的帮助，谢谢！

http://jsfiddle.net/f3mkqovm/

var myRect = paper.text(100, 100, ["Lorem",
    "<br>","ipsum dolor sit 'n amet /n see ", "'n","amend"]).attr({
    fill : 'black'
});

编辑：这是一个为拉斐尔工作的小提琴。由于snap.svg没有内置在jsfiddle中，所以我不知道其他fiddle会对任何人有多大帮助。http://jsfiddle.net/yf8364mp/

使用Snap.svg绘制多行文本有点麻烦
当使用字符串数组调用Paper.text方法时，Snap.svg会在text元素下创建tspan元素
如果要将文本元素显示为多行，则应手动设置每个tspan元素的位置

var paper = Snap(200,200);
paper.text({text:["Line1", "Line2", "Line3"]})
   .attr({fill:"black", fontSize:"18px"})
   .selectAll("tspan").forEach(function(tspan, i){
      tspan.attr({x:0, y:25*(i+1)});
   });

将插件函数重命名为您喜欢的任何函数：

Snap.plugin(function(Snap, Element, Paper, global) {
    Element.prototype.layoutTspans = function(xOffset, vSpacing) {
        this.selectAll("tspan").forEach(function(ts) {
            ts.attr({x: parseInt(ts.parent().attr("x")) + xOffset, dy: vSpacing});
        });
    };
});

然后从任何祖先元素调用它，例如文本元素：

snap.select("#t1").layoutTspans(13, 20);

要对多个文本应用相同的偏移量和间距。。。（可能有一种方法可以通过插件直接支持selectAll，但我找不到任何文档或示例）。

snap.selectAll("g.badge").forEach(function(el) { el.layoutTspans(13, 20); });
相关文章：