Raphael.js如何在Raphael.js中使用CSS文件？

在Raphael.js，如果我有一个文本元素：Raphael.js如何在Raphael.js中使用CSS文件？

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

我想用CSS样式这段文字，我成功地

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

CSS，但如果我定义什么外部CSS文件中的CSS代码？我怎样才能专门为我的文本元素定义CSS？

我试图在JavaScript ：

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

在my.css：

.my-text { 
    font-size: 18 
}

但它不会在所有的工作，因为jQuery.addClass（）不拉斐尔工作。。如何通过使用外部CSS文件来设计Raphael元素的想法？

来源

2011-05-26 Mellon

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

我也用Raphäel2.0测试过，它不起作用。无论如何 - 我建议尝试新的图书馆。它有一些令人敬畏的补充：https://github.com/DmitryBaranovskiy/raphael/tree/2.0

希望有所帮助。

来源

2011-05-26 10:00:27 thgie

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

但是，请注意，拉斐尔地方内嵌样式这将覆盖你的类，但你可以使用的东西像!important给力它。

注意这不是建议你应该画与正确的属性开始与SVG，我会建议使用“工厂”的办法，与性能设置产生的不同部位SVG已经。

实施例（在Chrome 13.0.772测试）：jsfiddle

来源

2011-05-26 10:10:01 WSkid

我同意你的看法。另一个原因是，如果使用CSS类设置样式，则不适用于IE <9（因为raphael使用VML而不是SVG）。 – 2011-07-12 17:05:08

诀窍是复位 “字体” -Attribute。

拉斐尔设置一个“字体” -Attribute到文本节点。这将覆盖你的CSS设置。对我来说，这个工程：

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

在我的CSS：

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

要准确地看到发生了什么，看到raphael.js，线6923和558（版本2.1.0）

来源

2013-11-22 11:26:57 sja

拉斐尔自动添加一堆内联字体样式。调用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; 
}

然后经过你的CSS类就能够做好自己的事情

来源

2015-08-26 17:59:01

Raphael.js如何在Raphael.js中使用CSS文件？

回答

相关问题