如何将一个css类添加到Raphael对象

Question

我正在尝试创建一个使用大量Raphael对象的网页,如线条,矩形,圆形.我正在为这些对象上的每个事件使用不同的颜色,例如onmouseover一种颜色,onmouseout另一种等等.因为我有很多样式,我想知道我是否可以为这些对象指定一个css类.我尝试在IE上使用以下代码,但我看不到样式效果

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

mediumBold是定义的css类之一.

我对此很新.任何指针都会有所帮助.

谢谢.

Answer 1

我这样做的方式:

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

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

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

Answer 2

首先,我不知道这个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函数分配类属性.

PS:请在更改脚本并使用之前检查许可条款.

Answer 3

为什么不简单地将"addClass"方法添加到所有Element实例？

像这样:

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

然后,你可以这样做:

rectObj.addClass('mediumBold');

Answer 4

Raphael attr与jQuery不同,attr因为它专为SVG设计.我不会搞砸这个,并为不同的目的使用不同的库.要rectObj与jQuery一起使用,您必须通过以下方式获取实际的DOM元素rectObj.node:

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

如果你不使用jQuery,你可以这样做:

rectObj.node.className += " mediumBold";

Answer 5

我遇到了同样的问题 - 我希望能更具体地将一个CSS类分配给Raphael创建的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属性.

希望这可以帮助将来的某个人.

Answer 6

我用了

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