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

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

• jquery
• jquery-ui
• javascript
• raphael

Share Improve this question Follow edited Oct 16, 2013 at 11:16 Meri Gaig 4977 bronze badges asked May 26, 2011 at 8:58 MellonMellon 38.9k7878 gold badges193193 silver badges265265 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

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.

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

Example (tested in Chrome 13.0.772): jsfiddle

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

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

Hope that helps.

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

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

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

And in my CSS:

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

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

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

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