在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
属性来实现下划线效果。例如:
text {
text-decoration: underline;
}
这样就可以为所有text
元素添加下划线效果了。
云+社区技术沙龙[第27期]
腾讯技术创作特训营第二季第4期
腾讯技术创作特训营第二季
云+社区技术沙龙[第21期]
算法大赛
云+社区技术沙龙 [第32期]
腾讯技术创作特训营第二季第3期
云+社区技术沙龙[第8期]
云+社区技术沙龙[第5期]
云+社区技术沙龙[第12期]
云+社区开发者大会 长沙站
领取专属 10元无门槛券
手把手带您无忧上云