使用 Snap.svg 创建多行文本答案

【问题标题】：Create multiple lines of text with Snap.svg使用 Snap.svg 创建多行文本
【发布时间】：2014-11-14 10:06:06
【问题描述】：

我无法弄清楚如何在 Snap.svg 中使用单个 paper.text 元素创建多行文本。我曾尝试使用针对 raphael.js 提到的技术，例如 \n，但这对 snap.svg 没有任何作用。

我尝试过使用
、\n 及其变体，但没有任何效果。我觉得在 raphael.js 中很容易做到这一点很奇怪（它在文档中），但是 snap.svg 文档没有提到任何关于此的内容，并且在网上搜索我一无所获。

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

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

编辑：这是一个 jsfiddle，其中 \n 正在为 raphael 工作。由于 snap.svg 没有内置到 jsfiddle 中，我不知道另一个小提琴会对任何人有多大帮助。 http://jsfiddle.net/yf8364mp/

【问题讨论】：

标签： javascript svg snap.svg

【解决方案1】：

用 Snap.svg 绘制多行文本有点麻烦。
当您使用字符串数组调用 Paper.text 方法时，Snap.svg 在文本元素下创建 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)});
   });

【讨论】：

非常感谢。正是我需要的！
forEach 如果使用 dy 会更简单： ...forEach(function(ts) { ts.attr({x:0, dy:25}); });

【解决方案2】：

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

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); });

【讨论】：