Jquery Raphael.js如何将CSS文件与Raphael.js一起使用？

在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元素设置样式的任何想法？？？

似乎存在一些差异，无法将外部CSS应用于Raphael文本。我建议您使用来阅读和解析外部css，并将规则应用于文本。有点复杂，但可以接受

我还使用Raphäel 2.0进行了测试，但它不起作用。无论如何，我建议尝试一下新的图书馆。它有一些很棒的补充：

---

希望有帮助。

您可以使用vanilla 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放置了内联样式，它将覆盖您的类，但是您可以使用类似于

的东西！重要信息

强制执行

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

示例（在Chrome13.0.772中测试）：

诀窍是重置“字体”属性

Raphael为文本节点设置“字体”属性。这将覆盖您的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）

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类将能够完成它们的任务

我同意您的看法。另一个原因是，如果您使用CSS类设置样式，则IE<9无法使用（因为raphael使用VML而不是SVG）。