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文件？

回答

相關問題