Raphael.js如何使用Raphael.js的CSS文件？

In Raphael.js, if I have an text element:

在Raphael.js中,如果我有一个文本元素:

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

I would like to use CSS to style this text, I successfully CSS it by

我想用CSS来设置这个文本的样式,我成功地通过它来CSS

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

BUT, what if I define the css code in an external CSS file? How can I specifically define the css for my text element?

但是,如果我在外部CSS文件中定义css代码怎么办?如何为我的文本元素专门定义css?

I tried in javascript:

我试过javascript:

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

in my.css:

.my-text {
    font-size: 18   
}

But it does not work at all, because the jQuery.addClass() is not working in Raphael..any ideas of how to style Raphael elements by using an external CSS file??

但它根本不起作用,因为jQuery.addClass()在Raphael中不起作用。如何通过使用外部CSS文件来设置Raphael元素的样式?

4 个解决方案

#1

There seem some differences that doesn't make it possible to apply external css to raphäel text. I recommend you use http://glazman.org/JSCSSP/ to read and parse your external css and apply the rules to your text. A bit more complicated but acceptable.

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

I also tested with Raphäel 2.0 and it doesn't work. Anyway - I recommend trying out the new library. It has some awesome additions: https://github.com/DmitryBaranovskiy/raphael/tree/2.0

我还使用Raphäel2.0进行了测试,但它不起作用。无论如何 - 我建议尝试新的库。它有一些很棒的补充:https://github.com/DmitryBaranovskiy/raphael/tree/2.0

Hope that helps.

希望有所帮助。

#2

You can use vanilla js to add a class like so:

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

However, please be aware that Raphael places in-line style which will override your class, but you can use things like !important to force it.

但是,请注意拉斐尔的内联风格会覆盖你的课程,但你可以使用像!important这样的东西强制它。

Note this is not suggested as you should be drawing the svg with the correct properties to start with, I would recommend using "factory" approach that generates your different svg parts with properties setup already.

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

Example (tested in Chrome 13.0.772): jsfiddle

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

#3

The trick is to reset the "font"-Attribute.

诀窍是重置“font”-Attribute。

Raphael sets a "font"-Attribute to the text node. That will override your CSS settings. For me this works:

Raphael为文本节点设置了“font”-Attribute。这将覆盖您的CSS设置。对我来说这有效:

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

And in my CSS:

在我的CSS中:

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

To exactly see whats happening, see raphael.js, line 6923 and 558 (Version 2.1.0)

要查看最新情况,请参阅raphael.js,第6923行和第558行(版本2.1.0)

#4

Raphael adds a bunch of inline font styles automatically. After calling Paper.text() to get your textElement use this function

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

Then your css classes will be able to do their thing

然后你的css课程将能够做他们的事情

#1