Raphael.js Как использовать файл CSS с Raphael.js? - PullRequest
Новая
       0

Raphael.js Как использовать файл CSS с Raphael.js?

3 голосов
/ 26 мая 2011

В 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 ... какие-либо идеи о том, как стилизовать элементы Raphael с помощью внешнего файла CSS ??

Ответы [ 4 ]

5 голосов
/ 26 мая 2011

Вы можете использовать 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'));

Однако, имейте в виду, что Рафаэль размещает встроенный стиль, который переопределяет ваш класс, но вы можете использовать такие вещи, как !important, чтобы вызвать его.

Обратите внимание, что это не рекомендуется, поскольку вы должны рисовать svg с правильными свойствами, чтобы начать, я бы рекомендовал использовать "фабричный" подход, который генерирует ваши различные части svg уже с настройкой свойств.

Пример (проверено в Chrome 13.0.772): jsfiddle

1 голос
/ 26 мая 2011

Кажется, есть некоторые отличия, которые не позволяют применять внешние CSS к тексту raphäel.Я рекомендую вам использовать http://glazman.org/JSCSSP/, чтобы прочитать и проанализировать ваш внешний CSS и применить правила к вашему тексту.Немного сложнее, но приемлемо.

Я также тестировал Raphäel 2.0, и он не работает.В любом случае - я рекомендую попробовать новую библиотеку.У него есть несколько замечательных дополнений: https://github.com/DmitryBaranovskiy/raphael/tree/2.0

Надеюсь, это поможет.

0 голосов
/ 26 августа 2015

Рафаэль автоматически добавляет несколько встроенных стилей шрифтов.После вызова 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 смогут делать свое дело

0 голосов
/ 22 ноября 2013

Хитрость в том, чтобы сбросить атрибут "font".

Рафаэль устанавливает атрибут шрифта для текстового узла. Это переопределит ваши настройки 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)

...