Raphael.js如何使用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元素的样式？

Answer 1

您可以使用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'));

但是,请注意拉斐尔的内线风格会覆盖你的课程,但你可以使用!important强迫它的东西.

请注意,这不建议,因为您应该使用正确的属性绘制svg,我建议使用"工厂"方法生成具有属性设置的不同svg部件.

示例(在Chrome 13.0.772中测试):jsfiddle