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函数分配类属性。

P.S：请在更改脚本并使用之前检查许可条款。

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一起使用，您必须通过rectObj.node获取实际的DOM元素：

$(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");

Answer 7

如果其他人偶然发现这种情况，拉斐尔缺乏设置某些SVG特定内容的能力，这是因为它是一种用于创建具有子集操作的矢量图形的工具这是SVG和VML之间的共同点。使用SVG细节扩展它是没有意义的，因为当使用VML时，您将失去该功能。当然，反之亦然，因为SVG不支持该特定功能，所以VML可能没有做到这一点。

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

7 个答案: