как добавить класс CSS в объект Raphael - PullRequest
Новая
       1

как добавить класс CSS в объект Raphael

28 голосов
/ 24 декабря 2010

Я пытаюсь создать веб-страницу, которая использует множество объектов Рафаэля, таких как линии, прямоугольники, круги. Я использую разные цвета для каждого события на этих объектах, например onmouseover одного цвета, onmouseout другого и т. Д. Поэтому, так как у меня много стилей, мне было интересно, могу ли я указать класс css для этих объектов. Я попытался использовать следующий код в IE, но не смог увидеть эффект стиля 

rectObj.attr('class','mediumBold');

mediumBold - это определенный класс CSS.

Я довольно новичок в этом. Любой указатель будет полезен.

Спасибо.

Ответы [ 7 ]

34 голосов
/ 23 апреля 2011

Как я это делаю: 

var rph = Raphael("target",100,100);

var p = rph.rect(0, 0, 12, 12, 1);

p.node.setAttribute("class","track");
10 голосов
/ 24 декабря 2010

Во-первых, я не знал об этом инструменте js. Выглядит потрясающе Возвращаясь к решению, необходимо внести изменения в Raphael.js, чтобы сделать эту работу. Я ссылаюсь на несжатый исходный файл здесь. В строке № 78 есть свойство с именем availableAttrs, в котором перечислены все возможные атрибуты, которые можно установить с помощью функции attr () . измените это свойство, чтобы включить класс со значением по умолчанию, как показано ниже: 

availableAttrs = {
    blur: 0, 
   "clip-rect": "0 0 1e9 1e9", 
    cursor: "default", 
    cx: 0, 
    cy: 0,
    fill: "#fff", 
   "fill-opacity": 1, 
    font: '10px "Arial"', 
   "font-family": '"Arial"', 
   "font-size": "10", 
   "font-style": "normal", 
   "font-weight": 400, 
    gradient: 0, 
    height: 0, 
    href: "http://raphaeljs.com/", 
    opacity: 1, 
    path: "M0,0", 
    r: 0, 
    rotation: 0, 
    rx: 0, 
    ry: 0, 
    scale: "1 1", 
    src: "", 
    stroke: "#000", 
   "stroke-dasharray": "", 
   "stroke-linecap": "butt", 
   "stroke-linejoin": "butt", 
   "stroke-miterlimit": 0, 
   "stroke-opacity": 1, 
   "stroke-width": 1, 
    target: "_blank", 
   "text-anchor": "middle", 
    title: "Raphael", 
    translation: "0 0", 
    width: 0, 
    x: 0, 
    y: 0, 
    class:""

},

Как только это изменение будет сделано, атрибуты класса могут быть назначены с помощью функции attr.

P.S .: Пожалуйста, проверьте условия лицензирования, прежде чем изменять скрипт и использовать его.

7 голосов
/ 21 мая 2013

Почему бы вам просто не добавить метод "addClass" ко всем экземплярам Element?

Как это: 

Raphael.el.addClass = function(className) {
    this.node.setAttribute("class", className);
    return this;
};

Затем вы можете сделать: 

rectObj.addClass('mediumBold');
5 голосов
/ 07 февраля 2013

Я использовал 

$(rectObj.node).attr("class", "mediumBold");
5 голосов
/ 26 мая 2012

Я столкнулся с той же проблемой - я хотел более конкретно иметь возможность назначить класс CSS для объекта SVG, созданного Рафаэлем. Вот как я это сделал: 

paper= Raphael("thePaperObj", 200, 10); //create a Raphael Obj
paper.canvas.className.baseVal="stretchBar";

В результате я получаю визуализированный элемент SVG следующим образом: 

<svg class="stretchBar" style="overflow: hidden; position: relative;" width="200" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">

Конечно, класс можно определить так, чтобы он содержал нужные атрибуты CSS в таблице стилей.

Надеюсь, это поможет кому-то в будущем.

5 голосов
/ 24 декабря 2010

Рафаэля attr отличается от attr в jQuery, поскольку он разработан специально для SVG.Я не стал бы возиться с этим и использовать разные библиотеки для разных целей.Чтобы использовать rectObj с jQuery, вы должны получить фактический элемент DOM через rectObj.node: 

$(rectObj.node).addClass("mediumBold");

Если вы не используете jQuery, вы можете сделать: 

rectObj.node.className += " mediumBold";
2 голосов
/ 22 сентября 2013

В случае, если кто-то еще наткнется на это, есть причина, по которой у Рафаэля не хватает возможности установить некоторые специфические для SVG вещи, и это потому, что это инструмент для создания векторной графики, который имеет подмножество операций, которые это общий язык между SVG и VML. Расширять его с помощью спецификаций SVG довольно бессмысленно, так как при использовании VML вы потеряете эту функциональность. И наоборот, конечно, могут быть вещи VML, которые он не делает, потому что SVG не поддерживает эту особую функцию.

...