Question

在Raphael.js中，如果我有一个文本元素：

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

我想使用CSS来设置此文本的样式，我通过

成功地对其进行了CSS

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

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

我试过了在javascript：

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

在my.css中：

.my-text {
    font-size: 18   
}

但它根本不起作用，因为jQuery.addClass（）在Raphael中不起作用..如何通过使用外部CSS文件来设置Raphael元素的样式？

Answer 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，我建议使用“工厂”方法生成具有属性设置的不同svg部件。

示例（在Chrome 13.0.772中测试）：jsfiddle

Answer 2

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

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

希望有所帮助。

Answer 3

诀窍是重置“font”-Attribute。

Raphael为文本节点设置了“font”-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）

Answer 4

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

然后你的css课程就能完成他们的工作

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

4 个答案: