Question

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

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

($(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?

I tried
in 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??

Answer 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.

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

Hope that helps.