Question

我无法弄清楚如何使用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/

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

Answer 2

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

AccountExpirationDate blank
accountExpires ; never
AccountLockoutTime ; blank
AccountNotDelegated ; blank
AllowReversiblePasswordEncryption ; blank
AuthenticationPolicy ; blank
AuthenticationPolicySilo ; blank
BadLogonCount ; blank
CannotChangePassword ; blank
Certificates ; blank
City ; blank
CN ; john T
..
..
blah 
blah

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

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

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

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

使用Snap.svg创建多行文本

2 个答案: