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

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');

在我的.css 中：

.my-text {
    font-size: 18   
}

但它根本不起作用，因為 jQuery.addClass() 在 Raphael 中不起作用..關於如何使用外部 CSS 文件設置 Raphael 元素樣式的任何想法？

Answer 1

您可以使用 vanilla js 添加 class ，如下所示：

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 放置的內聯樣式將覆蓋您的 class，但您可以使用!important之類的東西來強制它。

請注意，不建議這樣做，因為您應該從繪制具有正確屬性的 svg 開始，我建議使用“工廠”方法生成您的不同 svg 部件，並且已經設置了屬性。

示例（在 Chrome 13.0.772 中測試）： jsfiddle

Answer 2

似乎有些差異無法將外部 css 應用於 raphäel 文本。 我建議您使用http://glazman.org/JSCSSP/來讀取和解析您的外部 css 並將規則應用於您的文本。 有點復雜但可以接受。

我還用 Raphäel 2.0 進行了測試，但它不起作用。 無論如何 - 我建議嘗試新圖書館。 它有一些很棒的補充： https://github.com/DmitryBaranovskiy/raphael/tree/2.0

希望有幫助。

Answer 3

訣竅是重置“字體”屬性。

Raphael 為文本節點設置了一個“字體”屬性。 這將覆蓋您的 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 自動添加了一堆內聯字體 styles。 在調用Paper.text()獲取您的textElement ，使用此 function

function removeInlineFontStyles(textElement) {
  textElement.node.style.font = null;
  textElement.node.attributes.removeNamedItem('font-family');
  textElement.node.attributes.removeNamedItem('font-size');
  return textElement;
}

然后你的 css 類將能夠做他們的事情