Raphael JS中带下划线的文字

在Raphael JS中，您可以使用textPath函数结合text-anchor和textLength属性实现带下划线的文字效果。以下是一个示例：

paper.install(Raphael);
var r = Raphael('svg');
var svg = r.set();
var rect = svg.rect(100, 100, 50, 50).attr({fill: 'orange'});
var text = svg.text(100, 100, 'Hello, World!');
var path = r.path('M10 10L100 100L100 10Z');
path.attr({fill: 'none', stroke: 'black', 'stroke-width': '2'});

// 为文本添加下划线
var underline = text.getBBox().width;
text.attr({text-anchor: 'end'});
text.text(underline - 15, 100, 'Hello, World!');

// 添加带下划线的文字
var textPath = r.textPath(100, 100, 'Hello, World!');
textPath.attr({fill: 'none', stroke: 'black', 'stroke-width': '2'});
textPath.node.getStroke().width = 10;
textPath.node.getStroke().color = 'red';
textPath.node.getFill().color = 'black';
textPath.node.getFill().alpha = 0.5;

// 添加更多的文字
var text2 = svg.text(100, 200, '这是另一个带下划线的文本');
var text3 = svg.text(100, 300, '这是第三个带下划线的文本');

在这个示例中，我们首先添加了两个带下划线的文本，然后使用textPath函数添加了一个不带下划线的文本，并使用getBBox()属性计算出文本框的宽度，以便在text-anchor属性设置为end时，文本框的右下角与路径的交点在同一条垂直线上。接着，我们使用attr()方法设置文本框的stroke和fill属性，使其显示为红色，并将透明度设置为0.5，以实现半透明效果。最后，我们添加了更多的带下划线的文本，并将它们放置在路径的下方。

如果您想要更多的控制，可以使用CSS中的text-decoration属性来实现下划线效果。例如：