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

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

请注意，不建议这样做，因为您应该首先使用正确的属性绘制 svg，我建议使用“工厂”方法生成已经设置了属性的不同 svg 部分。

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