Raphael.js如何使用CSS文件？

Question

在Raphael.js中，如果我有一个文本元素：

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");

我想使用CSS来样式化这段文本，我通过以下方式成功地对其进行了CSS样式化：

($(t.node)).css('font-size', 18);

但是，如果我在外部CSS文件中定义CSS代码呢？我该如何为我的文本元素指定特定的CSS样式？

我尝试在JavaScript中使用：

($(t.node)).addClass('my-text');

在my.css文件中：

.my-text {
    font-size: 18   
}

但它根本不起作用，因为jQuery.addClass()在Raphael中无法工作..有没有使用外部CSS文件来样式化Raphael元素的想法？

- Mellon

Answer 1

您可以使用原生JS添加类，方法如下：

var paper = Raphael(10, 50, 320, 200);
var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");
(t.node.className ? t.node.className.baseVal = 'mytext' : t.node.setAttribute('class',  'mytext'));

然而，请注意，Raphael会放置覆盖您类的内联样式，但是您可以使用诸如！important之类的东西来强制执行它。

请注意，这并不建议，因为您应该使用正确的属性绘制svg以开始，我建议使用“工厂”方法生成已设置属性的不同svg部件。

示例（在Chrome 13.0.772中测试）：jsfiddle

- WSkid

---

我同意你的观点。另一个原因是，如果你使用CSS类来设置样式，在IE < 9上无法生效（因为raphael使用VML而不是SVG）。 - Davide Icardi

Answer 2

似乎存在一些差异，使得无法将外部CSS应用于Raphäel文本。我建议您使用http://glazman.org/JSCSSP/来读取和解析您的外部CSS，并将规则应用于您的文本。有点复杂但可以接受。

我还测试了Raphäel 2.0，但它不起作用。无论如何 - 我建议尝试一下这个新库。它有一些很棒的附加功能：https://github.com/DmitryBaranovskiy/raphael/tree/2.0

希望能帮到您。

- thgie

Answer 3

Raphael 会自动添加一堆内联字体样式。在调用 Paper.text() 获取你的 textElement 后，使用这个函数。

function removeInlineFontStyles(textElement) {
  textElement.node.style.font = null;
  textElement.node.attributes.removeNamedItem('font-family');
  textElement.node.attributes.removeNamedItem('font-size');
  return textElement;
}

那么你的 CSS 类将能够发挥它们的作用

- Bron Davies

Answer 4

诀窍是重置“font”属性。

Raphael将“font”属性设置为文本节点。这将覆盖您的CSS设置。对我来说，这很有效：

var txt = paper.text(10, 10, "Big Test Text").attr({"font": ""});
txt.node.setAttribute('class', 'my-text');

而在我的CSS中：

.my-text {
    font-size: 5em;
}

要准确地查看发生了什么，请查看raphael.js的第6923行和558行（版本2.1.0）。

- sja