Question

我想做一件简单的事情。只是带有下划线的文本，如html中的标记。我怎么能在Raphael JS中做到这一点？

Answer 1

这是一个应该完成你所追求的功能：

function underlineText(textElement) {
    var textBBox = textElement.getBBox();
var textUnderline = canvas.path("M"+textBBox.x+" "+(textBBox.y+textBBox.height)+"L"+(textBBox.x+textBBox.width)+" "+(textBBox.y+textBBox.height));  
}

var textElement = canvas.text(100,100,"hello world");
underlineText(textElement);

Answer 2

适用于SVG画布，未使用VML（＆lt; = IE8）进行测试：

var text=paper.text(...);
if (text.node){
    $(text.node).css('text-decoration','underline');
}

您可以在SVG元素上设置任何CSS3文本属性，在VML元素上设置CSS2属性。

Answer 3

我认为之前的答案已经不再好了（因为对我来说它根本不起作用），但是通过一些技巧我把它当作一种魅力。

这是：

var underlineText = function () {
var textBBox = textElement.getBBox();
var textUnderline = paper.path("M"+textBBox.x+" "+(textBBox.y+textBBox.height)+"L"+(textBBox.x+textBBox.width)+" "+(textBBox.y+textBBox.height));};

underlineText(textElement);

干杯！

www.stefanomoscardini.it

Raphael JS中带下划线的文字

3 个答案: