Geek asks and answers

Raphael.js How to use CSS file with Raphael.js?

In Raphael.js, if I have a 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

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

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

I tried in javascript:

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

in my.css:

.my-text {
    font-size: 18   
}

But this does not work at all, because jQuery.addClass () does not work in Raphael. Any ideas on how to style Raphael elements using an external CSS file?

+3
source share
4 answers

, CSS raphäel. http://glazman.org/JSCSSP/ CSS . , .

Raphäel 2.0, . - . : https://github.com/DmitryBaranovskiy/raphael/tree/2.0

, .

+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 , "factory", svg .

( Chrome 13.0.772): jsfiddle

+5

Focus on reset "font" -Attribute.

Raphael sets the "font" attribute of the text node. This 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 see exactly what is happening, see raphael.js, lines 6923 and 558 (version 2.1.0)

0
source

Raphael automatically adds a bunch of built-in font styles. After a call Paper.text(), so that your textElementuses 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 job

0
source

More articles:


All Articles