Как добавить класс css к объекту Рафаэля

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

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

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

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

Спасибо.

Ответ 1

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

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

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

p.node.setAttribute("class","track");

Ответ 2

Во-первых, я не знал об этом инструменте js. Выглядит ужасно. Возвращаясь к решению, для Raphael.js необходимо внести изменения, чтобы сделать эту работу. Я ссылаюсь на несжатый исходный файл здесь. На строке номер 78 есть свойство, называемое доступнымAttrs, в котором перечислены все возможные атрибуты, которые могут быть установлены с помощью 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: Пожалуйста, проверьте условия лицензирования перед тем, как изменить script и использовать его.

Ответ 3

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

Вот так:

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

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

rectObj.addClass('mediumBold');

Ответ 4

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

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

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

rectObj.node.className += " mediumBold";

Ответ 5

Я столкнулся с одной и той же проблемой - я хотел бы более конкретно присвоить класс 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 в таблице стилей.

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

Ответ 6

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

$(rectObj.node).attr("class", "mediumBold");

Ответ 7

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