Raphael JS中带有下划线的文本

Question

我想制作一个简单的东西。就像HTML中的标签一样，只是带有下划线的文本。我该如何在Raphael JS中实现它？

- Neir0

---

相关讨论请参见http://groups.google.com/group/raphaeljs/browse_thread/thread/c42a3d2503fcbbea - beldaz

Answer 1

适用于SVG画布，未经VML测试（<=IE8）：

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

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

- Tony BenBrahim

---

这是唯一有效的答案！谢谢。应该被接受。 - Katie

Answer 2

这里有一个函数，应该可以满足您的需求：

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

- Donovan

---

关于这个问题，需要注意的是，如果您旋转了文本，它将无法按预期工作。不过，这仍然是一个优雅的解决方案！ - SimonR

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

- Stefano Moscardini